[toc]
## pre-notify
content-area和行高、line-height:normal值并**沒有**關系(比如你將html的line-height統一設置為一個數值,包裹文字的純span的高度并不會發生變化),只和字體和字號有關
只有包裹文字的塊元素的高度才和行高、line-height:normal有關。
## font-size決定span寬度
### font-size和文字選中的背景色區域和字體
微軟雅黑

文字選中的背景色區域的**寬度**剛好為font-size大小
宋體SimSun

**不僅**文字選中的背景色區域的**寬度**剛好為font-size大小
,在chrome下文字選中的背景區域的**高度** -**也**剛好為font-size大小(火狐中不是),這意味著純span的高度也為一個font-size大小
但需要注意的是,span的高度并不等于行高,行高等于`font-size*line-height:normal`,而宋體的normal值為1.1幾,

微軟雅黑字體下,文字的最大**可視**寬度(非選中時的背景區域)剛好和文字選中的背景色區域的**寬度**相等

SimSun下,文字的最大**可視**寬度可以發現是略小于文字選中的背景色區域的
>結論:
>
>font-size的大小一定和文字選中的背景色區域的**寬度**一樣大
>如果是SimSun(且為谷歌),那么文字選中的背景色區域的**高度**也和font-size一樣大
>
>==== ==== ===
>
>除此之外,文字實際占的寬度(**視覺寬度**)并不一定等于font-size,
>微軟雅黑是等于的,SimSun則是略小于
>
>但其實這并沒有問題,因為css布局看的是font-size,一個span的寬度是由 `font-size*[字體個數]` 決定的
>
## lineHeight決定父容器高度
### line-height:normal
line-height默認值為`normal`,意思是根據字體的不同,line-height就會取不同的值,
如微軟雅黑,line-height就為`1.32`多一點(這個值不大對?),
而宋體為`1.14`多一點
>[danger] 如果在html中重置line-height為某個特定值,那么會覆蓋不同字體的所獨有的line-height值
>
> 瀏覽器不同,字體的normal值也是不同的,可能會多一位小數或則最后一位小數的值不同
### span的高度并不一定等于行高
不改變字體自帶的`line-height:normal;`
微軟雅黑下,chrome下是等于的,firefox下不等于

**且**,一旦字體本身的`line-height:normal`的值被改變,那么span的高度就 **一定不** 等于行高 (但如果不是span,內在盒子是塊級盒子就不會)

span的高度依然由content-area(只受字號、字體,和行高**無關**)決定
可以借由`display:inline-block;`"修正"
### 文字選中背景區域的高度和內聯盒子的高度以及父容器高度
>微軟雅黑
>

chrome中 文本選中的區域的**高度**剛好和內聯盒子一樣大

firefox中,微軟雅黑字體時,文本選中區域的**高度**是大于內聯盒子高度的
這是為什么呢?
內聯盒子的高度不應該就是content-area(文字選中背景區域)的高度嗎?
有兩種可能
,第一種,內聯盒子的高度確實是content-area的高度,但文字選中的背景區域在某些字體下并不等于content-area的高度,在某系字體下才等于
,第二種,內聯盒子的高度并不一定等于content-area的高度(此時依然把文字選中時的背景區域看做是content-area的高度),這樣就能很好理解為什么藍色背景區域會超出span
So兩種假設,個人傾向于第一種,即文字選中的背景區域在某些情況下并不等于content-area的高度,這樣理解的好處在于,span的高度我們可以看做是由content-area決定的(只受字號和字體影響)
So,接下來我們說到content-area,請把它理解為一個純span的高度(只受字號和字體影響)
---
由于span在不同瀏覽器下,即使為同一種字體同一個字號,高度也可能是不同的,并且這個span和它的容器元素的高度也不相等(等于該瀏覽器下這款字體的content-area大小),So,為了便于開發,為了規范瀏覽器表現的一致性
我們通常會將將這個普通的行級盒子變成行內塊

此時這個span的高度會統一像它的容器元素一樣由`行高`決定(原本由content-area決定)
但此時仍然有個問題,chrome和firefox內聯盒子的父級的高度呈現依然是不一樣的

(firefox)
可以發現firefox大于19px,而chrome剛好等于19px(文字選中背景色區域的高度),這是因為firefox微軟雅黑字體的line-height:normarl值更大一點的原因。
So,我們可以統一的設置一個`line-height`數值,這樣最終我們就能得到一個一致的高度
>SimSun
>
上面我們看了字體為微軟雅黑時,行內盒子、父容、文字選中背景區的關于高度的表現情況,下面是字體為宋體時的表現

可以發現這次不論是chrome還是firefox,文本選中的背景色區域的高度和內聯盒子的高度都是一樣大的
但父容的高度和span還是不一樣大,且差距比上一次(微軟雅黑)還大
>結論:
>
>文字選中背景區域的高度和span的高度是一樣大的(除了在微軟雅黑這種字體下,firefox的選中區域的高度會大于span的高度,可用inline-block修復)
>
>不同瀏覽器下,即使字體、font-size、line-height都相同,父容器高度因此也相同,**但**span(外在內在盒子都為inline)的高度也可能是不一樣的,
>但,只要設將span設置為inline-block,高度就會保持一樣(等于行高)
>
>So,一行布局時,要讓行級元素在不同瀏覽器下表現一致,需要:
>1. 對行級元素:display:inline-block(解決span和文本選中背景區域高度、父容不等高的情況)
>2. 父容器line-height使用固定數值
>因為一行的默認高度等于行高,但不同瀏覽器下line-height是不一樣的,因為自帶的字體不一樣,并且同一種字體的line-height雖然都使用的關鍵字值`normal`,但不同瀏覽器下字體內置的的line-height:normal值是存在一些差距的
### display:inline-block解決span在不同瀏覽器下高度的不一致
## 元素box-sizing與line-height越界
box-sizing為 content-box的時候
即使line-height大于元素高度設定的值,文字也會居中顯示

但一旦,box-sizing改為border-box
```
<C css='background:pink;padding:2px 5px;box-sizing:border-box;height:16px;' >
Mly
</C>
```
chrome

firefox

可以發現文字不再居中顯示了,而只是讓line-height的(line-box)上邊和元素的content-box的上邊對齊
## 關于英文
宋體下,英文字符占據的寬度是中文字符的一半,且`M`和`i`占據的寬度是一樣的

微軟雅黑下,M占據的寬度為1個font-size,而其它字母依據它們本身的寬度大小的不同占據的寬度也是不同的,
另外m和M的寬度也是不同的

### monospace
monospace是等寬字體簇(宋體算是其中一種?),但并不代表每個英文字母從而就會變為1個font-size大小,它們只是每個英文字母變得一樣寬了,至于這個寬度是多少,是不一定的,可能1/2 font-size、1/3font-size...
### text-indent
`text-indent:2em` 對于中文比較適用,如果是英文的話,介于上面所述,會出現參差不齊的情況
因為此時1個英文字母的寬度不一定等于1em,
#### 1em
1em是一個`M字母寬度`的意思,它一般情況下等于1個大寫字母`M`的寬度,但也存在不等于的情況(一定等于一個中文字符的寬度)
>text-indent:2em
>
微軟雅黑字體下

simsun字體下

monaspcae字體簇下

### 文字選中背景區域的等于span的大小
simsun

微軟雅黑

---
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端