摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。

上一篇：《CSS世界》筆記二：盒模型四大家族
下一篇：《CSS世界》筆記四：流的保護(hù)與破壞

在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已。在這一篇博客（《css世界》第五章）中，張大大從深層次解釋了垂直對(duì)齊的原理，并為內(nèi)聯(lián)元素的垂直對(duì)齊提供了最佳實(shí)踐。

（1）基線(baseline)：字母 x 的下邊緣(線)就是基線

（2）x-height：小寫字母 x 的高度，術(shù)語(yǔ)描述就是基線和等分線(mean line)(也稱作中線，midline)之間的距離

ascender height: 上行線高度
cap height: 大寫字母高度
median: 中線
descender height: 下行線高度

（3）middle線：vertical-align:middle; 中middle指的是基線往上1/2 x-height高度（近似垂直居中）

（4）單位ex：CSS中的一個(gè)相對(duì)單位，指的是小寫字母 x 的高度
用法：不受字體和字號(hào)影響的內(nèi)聯(lián)元素的垂直居中對(duì)齊效果

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

對(duì)于非替換元素的純內(nèi)聯(lián)元素，其可視高度完全由 line-height 決定，通俗的說(shuō)，純內(nèi)聯(lián)元素的可視高度不受padding、margin、border 屬性的影響（這個(gè)我們?cè)谏弦黄┛鸵灿姓f(shuō)明）

一個(gè)公式：行距 = line-height - font-size

上下行距分配規(guī)則：當(dāng)行距為偶數(shù)時(shí)，上下行距平分；當(dāng)行距為基數(shù)時(shí)，上邊距向上取整，下邊距向下取整；因?yàn)榻^大多數(shù)字體都是偏下的

誤區(qū)：并非是line-height=height實(shí)現(xiàn)了單行文本的居中，line-height多帶帶作用即可實(shí)現(xiàn)

應(yīng)用：利用line-height實(shí)現(xiàn)多行文本居中對(duì)齊

    
基于行高實(shí)現(xiàn)的...


/* 近似居中對(duì)齊 */
.box {
    width: 280px;
    line-height: 120px;
    background-color: #f0f3f9;
    margin: auto;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    text-align: left;
    vertical-align: middle;
}

/* 絕對(duì)居中 */
.box {
    font-size: 0;
}
.box .content {
    font-size: initial;
}

原理：
近似居中：.box行高為120，.content行高為20，“幽靈空白節(jié)點(diǎn)”在.content前撐起了整個(gè)內(nèi)容區(qū)域

絕對(duì)居中：在上面的基礎(chǔ)上，由于middle（基線往上1/2 x-height高度）為近似居中，由于x-height受到font-size的影響，font-size為0時(shí)可理解為絕對(duì)居中

line-height 的默認(rèn)值是 normal，還支持?jǐn)?shù)值、百分比值以及長(zhǎng)度值

默認(rèn)值normal在不同字體下的解析不同，因此在實(shí)際開發(fā)中一般會(huì)重置line-height

重點(diǎn)：

假設(shè) font-size = 14px;

數(shù)值：line-height: 1.5; ==> line-height 計(jì)算值是 1.5*14px=21px

百分比值：line-height: 150%; ==> line-height 計(jì)算值是 150%*14px=21px

長(zhǎng)度值：line-height:21px

乍一看，似乎 line-height:1.5、line-height:150%和 line-height:1.5em 這3種用法是一模一樣的，最終的行高大小都是和 font-size計(jì)算值，但是，實(shí)際上，line-height:1.5和另外兩個(gè)有一點(diǎn)兒不同，那就是繼承細(xì)節(jié)有所差別。如果使用數(shù)值作為 line-height 的屬性值，那么所有的子元素繼承的都是這個(gè)值;但是，如果使用百分比值或者長(zhǎng)度值作為屬性值，那么所有 的子元素繼承的是最終的計(jì)算值

最佳實(shí)踐：基本上各大站點(diǎn)都是使用數(shù)值作為全局的 line-height 值

vertical-align 作用的前提條件是：只能應(yīng)用于內(nèi)聯(lián)元素以及display值為table-cell的元素，注意，浮動(dòng)和絕對(duì)定位會(huì)讓元素塊狀化也會(huì)使vertical-align失效

四類屬性值：

線類，如 baseline(默認(rèn)值)、top、middle、bottom;

文本類，如 text-top、text-bottom;

上標(biāo)下標(biāo)類，如 sub、super;

數(shù)值百分比類，如 20px、2em、20%等;

根據(jù)計(jì)算值的不同，相對(duì)于基線往上或往下偏移，到底是往上還是往下取決于vertical-align的計(jì)算值是正值還是負(fù)值，如果是負(fù)值，往下偏移，如果是正值，往上偏移

vertical-align:baseline 等同于 vertical-align:0

vertical-align的百分比：margin 和 padding 是相對(duì)于寬度計(jì)算的，line-height 是相對(duì)于 font-size 計(jì)算的，而這里的 vertical-align 屬性的百分比值則是相對(duì)于 line-height 的計(jì)算值計(jì)算的

（1）案例一：任意一個(gè)塊級(jí)元素，里面若有圖片，則塊級(jí)元素高度基本上都要比圖片的高度高

    


.box {
    border: 1px solid #ccc;
}
.box > img {
    height: 96px;
}

原因：間隙產(chǎn)生的三大元兇就是“幽靈空白節(jié)點(diǎn)”、line-height和vertical-align屬性；圖片前放置小寫的x，會(huì)發(fā)現(xiàn)圖片的基線是元素底部，與“幽靈空白節(jié)點(diǎn)”的基線（小寫x下邊緣）對(duì)齊；

解決方法：

圖片塊狀化：可以一口氣干掉“幽靈空白節(jié)點(diǎn)”、line-height和vertical-align

line-height:0;

font-size: 0;

干掉基線對(duì)齊：vertical-align的值為top、middle、bottom中的任意一個(gè)都是可以的

（2）案例二：使用text-align: justify;實(shí)現(xiàn)文字兩端對(duì)齊

text-align: justify;多用于文字排版，有一個(gè)非常重要的特性：不會(huì)對(duì)最后一行兩端對(duì)齊，因此單行文本時(shí)若要對(duì)齊需要人為換行

補(bǔ)充text-align: justify;的用法案例：

    姓名

    聯(lián)系方式


$font-size: 14px;
$line-height: 1.5;

.form {
    background-color: #eee;
    width: $font-size * 5 + 150px;
}
label {
    display: inline-block;
    text-align: justify;
    width: $font-size * 5;
    height: $font-size * $line-height;
    overflow: hidden;
    vertical-align: bottom;
    margin-right: 10px;
}
label:after {
    content: "";
    width: 100%;
    display: inline-block;
}

（3）案例三：使用text-align: justify;實(shí)現(xiàn)列表兩端對(duì)齊

為了讓最后一行也兩端對(duì)齊，需要使用占位元素實(shí)現(xiàn)換行

    
    
    
    
    
    
    


.box {
    text-align: justify;
}
.justify-fix {
    display: inline-block;
    width: 96px;
}

此時(shí)，元素底部有很大的間隙。產(chǎn)生的原因無(wú)非是vertical-align，因此我們會(huì)設(shè)置line-height:0;，但是并沒(méi)有真正解決問(wèn)題，為什么？

一個(gè) inline-block 元素，如果里面沒(méi)有內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線就是其 margin 底邊緣;否則其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。

x-baseline


.dib-baseline {
    display: inline-block;
    width: 150px; height: 150px;
    border: 1px solid #cad5eb;
    background-color: #f0f3f9;
}

實(shí)際展示如下圖所示：

最終解決：

font-size: 0;

line-height: 0; 且在占位元素中添加空格 

一個(gè) inline-block 元素，如果里面沒(méi)有內(nèi)聯(lián)元素，或者 overflow 不是 visible， 則該元素的基線就是其 margin 底邊緣;否則其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。

基于上面的理論，有下面幾個(gè)要點(diǎn)：

圖標(biāo)高度和當(dāng)前行高都是 20px

圖標(biāo)標(biāo)簽里面永遠(yuǎn)有字符，可以借助:before 或:after 偽元素生成一個(gè)空格字符輕松搞定

圖標(biāo) CSS 不使用 overflow:hidden 保證基線為里面字符的基線，但是要讓里面潛在的字符不可見

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: url(sprite.png) no-repeat center;
    white-space: nowrap;
    letter-spacing: -1em;
    text-indent: -999em;
}
.icon:before {
    content: "3000";
}

利用之前提到的絕對(duì)居中的知識(shí)vertical-align:middle; font-size:0;

    



.container {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
    white-space: normal;
}

內(nèi)聯(lián)元素各種線 & 行高計(jì)算及分配規(guī)則；

利用line-height如何實(shí)現(xiàn)多文本居中 & line-height 各屬性值區(qū)別

vertical-align取值對(duì)垂直對(duì)齊的影響及解決方式

justify 實(shí)現(xiàn)文字兩端對(duì)齊和列表兩端對(duì)齊

上一篇：《CSS世界》筆記二：盒模型四大家族
下一篇：《CSS世界》筆記四：流的保護(hù)與破壞