[TOC]

壹、x

1、字母與基線

1. Line-height 行高的定義就是兩基線的間距
2. vertical-align默認(rèn)的值就是基線
3. 字母x的下邊線就是我們的基線

2、x-height 與ex

x-height就是小寫字母x的高度，

在css世界中，vertical-align:middle的middle就是只基線上1/2 x-height的高度,所以vertical-align:middle不是絕對的居中了，不同的字體，x的基線不一樣，高度也不一樣，所以只是看起來好像在中間一樣

ex兼容性比較早，ie6就可以了，ex就是x-height的大小。

用法在副作用上，用來實(shí)現(xiàn)文字后的小圖標(biāo)居中對齊(不受字體和字號影響的內(nèi)聯(lián)元素的垂直居中對齊效果)

內(nèi)聯(lián)元素默認(rèn)基線對齊，基線是x的底線 然后如果圖標(biāo)就是x的高度的話，看起來就好像居中對齊一樣

<style>
        .point01 .icon_arrow{
            display: inline-block;
            width: 20px;
            height: 1ex;
            background: url(./img/arrow.png) no-repeat center
        }
    </style>
    <span class="point01 "> i am the testx<span class="icon_arrow"> </span></span>

image-20180509205350668.png

貳、 line-height

內(nèi)聯(lián)元素的高度不是由font-size元素決定的，而是由line-height撐開的，so非替換元素的純內(nèi)聯(lián)元素的可視高度，完全由line-height決定

1. 一般來說，行距 = line-height - font-size

2. 當(dāng)我們的字體是宋體的時候，內(nèi)容區(qū)域和em-box是等同的

3. Line-height 小于 font-size的時候字會疊加到一起，行距為負(fù)值

4. Line-height不可以影響替換元素的高度，如img，但是能改變替換元素相鄰兄弟元素'幽靈空白節(jié)點(diǎn)'

5. 如果行內(nèi)元素和替換元素在一塊，也就是圖文模式的時候，line-height只能影響最小高度因?yàn)?/p>

   1. 替換元素高度不受line-height影響
   2. vertical-align背后的作用

6. 單行文字居中，只要設(shè)置line-height就可以了，如果有高度的話，需要把line-height和高度設(shè)置的一樣高就好了

7. 行高控制文字居中，不僅適用于單行，多行也是可以的，line-height能夠讓單行或者是多行文字近似的垂直居中注意這的近似

    <style>
        /*--大的盒子用line-height--*/ 
           .point02 .box {
              line-height: 1024px;
           }
        /*小的盒子，讓他先成為行內(nèi)元素，然后居中顯示就好了*/
           .point02 .content {
              display: inline-block;
              line-height: 20px;
              vertical-align: middle;
           }
       </style>
   

   因?yàn)閮?nèi)聯(lián)元素都是基線對齊的，所以我們通過對.content設(shè)置vertical-align:middle來調(diào)整多行文本的垂直位置

8. line-height的值可以是數(shù)字，px， em， 百分比，猛一看，line-height:150%; line-height:1.5 line-height:1.5em沒有區(qū)別，實(shí)際上，line-height:1.5和另外兩個有點(diǎn)區(qū)別，line-height:1.5所有子元素都是繼承1.5，但是如果是百分比，或者是em子繼承的是計(jì)算出來的那個px

   比如：

   • line-height:1.5;font-size : 20px;實(shí)際效果是line-height:30px;如果兒子的font-size : 30px; line-height的實(shí)際效果是45px;
   • Line-height:150%;font-size:20px; 實(shí)際效果 line-height:30px;如果兒子font-size:30px; line-height的值依然是30px;

9. 如果line-height:150%;想要有l(wèi)ine-height:1.5的效果使用方法：

   *{line-height:150%}
   /**因?yàn)橥ㄅ浞硎舅械脑?，?yōu)先級大于繼承來的css**/
   

10. 推薦的line-height的值：

    1. 重內(nèi)容展示的網(wǎng)頁，比如博客，論壇之類的，一定用數(shù)值作為單位。
    2. 如果是偏重于布局結(jié)構(gòu)精致的網(wǎng)站，長度數(shù)值都好
    3. 如果是數(shù)值，一般1.3 1.4 1.5都好，但是如果是長度值，20px推薦，因?yàn)橛?jì)算方便

11. 大值特性：

    <div class="box">
        <span></span>
    </div>
    

    上邊的情況，無論 box span的line-height誰大誰小，box的高度由大的那個line-height決定