[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  微軟雅黑  ---