<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [toc] ## pre-notify content-area和行高、line-height:normal值并**沒有**關系(比如你將html的line-height統一設置為一個數值,包裹文字的純span的高度并不會發生變化),只和字體和字號有關 只有包裹文字的塊元素的高度才和行高、line-height:normal有關。 ## font-size決定span寬度 ### font-size和文字選中的背景色區域和字體 微軟雅黑 ![](https://box.kancloud.cn/a18ed50f0bd2cfd67e84e1bf29333647_246x93.png) 文字選中的背景色區域的**寬度**剛好為font-size大小 宋體SimSun ![](https://box.kancloud.cn/de8c3f4560770eca50b2ce11263ccd05_214x83.png) **不僅**文字選中的背景色區域的**寬度**剛好為font-size大小 ,在chrome下文字選中的背景區域的**高度** -**也**剛好為font-size大小(火狐中不是),這意味著純span的高度也為一個font-size大小 但需要注意的是,span的高度并不等于行高,行高等于`font-size*line-height:normal`,而宋體的normal值為1.1幾, ![](https://box.kancloud.cn/db1fcfebf2dbf24e65babb59b7f414af_260x142.png) 微軟雅黑字體下,文字的最大**可視**寬度(非選中時的背景區域)剛好和文字選中的背景色區域的**寬度**相等 ![](https://box.kancloud.cn/ec4f7332f4273ef216f8353c3cfa10ac_72x72.png) 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下不等于 ![](https://box.kancloud.cn/9fa41600c050ab6f59791f2c5c03c4c1_214x135.png) **且**,一旦字體本身的`line-height:normal`的值被改變,那么span的高度就 **一定不** 等于行高 (但如果不是span,內在盒子是塊級盒子就不會) ![](https://box.kancloud.cn/980cb95087a3da30fa129ca610d3cd9c_449x205.png) span的高度依然由content-area(只受字號、字體,和行高**無關**)決定 可以借由`display:inline-block;`"修正" ### 文字選中背景區域的高度和內聯盒子的高度以及父容器高度 >微軟雅黑 > ![](https://box.kancloud.cn/d4b744cb9eb159a10848d985a8a1446c_265x138.png) chrome中 文本選中的區域的**高度**剛好和內聯盒子一樣大 ![](https://box.kancloud.cn/5e3e53785a7869d7f63bac6e022d3333_240x84.png) 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,為了便于開發,為了規范瀏覽器表現的一致性 我們通常會將將這個普通的行級盒子變成行內塊 ![](https://box.kancloud.cn/45e8fb9fb8b5376d907aec0757dab361_205x68.png) 此時這個span的高度會統一像它的容器元素一樣由`行高`決定(原本由content-area決定) 但此時仍然有個問題,chrome和firefox內聯盒子的父級的高度呈現依然是不一樣的 ![](https://box.kancloud.cn/cbce84d374e780def91871bb04557e10_197x70.png) (firefox) 可以發現firefox大于19px,而chrome剛好等于19px(文字選中背景色區域的高度),這是因為firefox微軟雅黑字體的line-height:normarl值更大一點的原因。 So,我們可以統一的設置一個`line-height`數值,這樣最終我們就能得到一個一致的高度 >SimSun > 上面我們看了字體為微軟雅黑時,行內盒子、父容、文字選中背景區的關于高度的表現情況,下面是字體為宋體時的表現 ![](https://box.kancloud.cn/2a57bf4d106cacbe927d753ed4152926_293x114.png) 可以發現這次不論是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大于元素高度設定的值,文字也會居中顯示 ![](https://box.kancloud.cn/f0dbfd5875acf2c3ef527b2749d11ebf_250x142.png) 但一旦,box-sizing改為border-box ``` <C css='background:pink;padding:2px 5px;box-sizing:border-box;height:16px;' > Mly </C> ``` chrome ![](https://box.kancloud.cn/3d4374a261f9d10f79f99926e1c4929c_265x143.png) firefox ![](https://box.kancloud.cn/f7efe224bc385be2080482fd9e5dfea9_152x98.png) 可以發現文字不再居中顯示了,而只是讓line-height的(line-box)上邊和元素的content-box的上邊對齊 ## 關于英文 宋體下,英文字符占據的寬度是中文字符的一半,且`M`和`i`占據的寬度是一樣的 ![](https://box.kancloud.cn/77f2a83c3470319f2af4509f2580d40f_120x25.png) 微軟雅黑下,M占據的寬度為1個font-size,而其它字母依據它們本身的寬度大小的不同占據的寬度也是不同的, 另外m和M的寬度也是不同的 ![](https://box.kancloud.cn/2ec1b8673a1a3224ca87726f1d38436c_93x30.png) ### 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 > 微軟雅黑字體下 ![](https://box.kancloud.cn/369c7bfc61569025e42ecd734e2a29d5_131x56.png) simsun字體下 ![](https://box.kancloud.cn/103a3f556e2ca1b03fd35451d50db425_130x46.png) monaspcae字體簇下 ![](https://box.kancloud.cn/5bea67e7dbe84a9cb3cdd7cacc4a5f62_120x58.png) ### 文字選中背景區域的等于span的大小 simsun ![](https://box.kancloud.cn/ac7bda506da7a3ae4cb69c4b400440ba_212x119.png) 微軟雅黑 ![](https://box.kancloud.cn/60ef71bd5bfbb2572a62f7466a656be8_243x133.png) ---
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看