# 從零開始的前端生活--line-height和vertical-align 前言 我覺得塊級元素就是負責網頁的結構骨架排列，而內聯元素就是躲在塊級元素內部來負責內容排列，創世者應該是這樣考慮的吧 line-height 定義 對於非替換元素的純內聯元素，他的高度完全由line-height決定 ...
從零開始的前端生活--line-height和vertical-align
前言
我覺得塊級元素就是負責網頁的結構骨架排列，而內聯元素就是躲在塊級元素內部來負責內容排列，創世者應該是這樣考慮的吧
line-height
定義
對於非替換元素的純內聯元素，他的高度完全由line-height決定。line-height是行高的意思，和行距有掛鉤，具體如下圖所示
行高和行距有這樣的一個公式： 行距 = line-height - font-size；半行距 = 行距/2;遇到小數怎麼辦？如果行距等於7px，半行距= 7/2 =3.5px，因為像素不能小數，所以上半行距要向下取整為3px，下半行距向上取整為4px；
隱身的盒子
HTML5文檔聲明中，內聯元素的所有解析和渲染表現就如同每一行框盒子的前面有一個“空白節點”一樣。什麼意思？用代碼來看一下。
<div>
<span></span>
</div>
span {
display: inline-block;
}
結果div莫名其妙有了高度，其實這是幽靈空白點在搞事情。
剛開始的時候，我沒有加span{ display: inline-block; }，結果沒有出現幽靈空白節點，我在想會不會張老師寫錯了，然後就去網上查，找到了答案，是這樣的
這個幽靈空白節點是存在行框盒子前面，它是具有該元素的字體和行高屬性的0寬度的內聯盒。
line-height對替換元素和塊級元素
line-height不會影響替換元素。
看下代碼
<div>
<img src="" alt="">
</div>
div {
line-height: 128px;
}
結果是這樣的
不會影響img的話，為啥div被撐高了，其實確實不會影響，不過line-height此時作用在幽靈空白節點上，幽靈空白節點此時高度為128，行框盒子的高度也被幽靈空白節點撐高了，繼而div被行框盒子撐高了。他就是這樣的一層一層邏輯。
塊級元素本身是不會受line-height影響的
屬性值
- 數值，如line-height: 1.5; 其計算值就是當前的font-size*1.5；
- 百分比值 line-height: 150%; 其計算值就是當前的font-size*150%；
- 長度值，line-height：21px；等等
區別在於繼承上有不同。
百分比和長度值值繼承的是父元素計算後的值，而數值繼承的還是數值，不是父元素計算的值
vertical-align
基線
網上找到圖片如上，x的下邊緣就是我們的基線。vertical-align的預設值就是基線。而vertical-align: middle;大概就在x的中心那個點。
基線(baseline)的位置
文本之類的內聯元素，基線就在字元x的下邊緣
對於替換元素，基線則在替換元素的下邊緣
對於inline-block元素，分兩種情況，一種是如果裡面沒有內聯元素或overflow不是visible，則基線在其margin的地邊緣，否則基線就是元素裡面最後一行內聯元素的基線。
作用前提
vertical-align起作用的前提條件：只能應用於內聯元素以及display值為table-cell的元素。其他塊級元素則不支持。
看下代碼，我認為vertical-align是讓內聯盒子在行框盒子中垂直居中，首先看下什麼是行框盒子，我覺得是這樣的。
而vertical-align: middle；就是讓裡面的盒子在行框盒子中垂直居中。所以行框盒子有一定高度才會明顯。
<div class="box">
<span>span標簽</span>
<a href="">鏈接</a> 文字
</div>
.box {
width: 300px;
height: 300px;
border: 1px dashed pink;
}
span {
vertical-align: middle;
}
這樣子寫當然不會垂直居中！！！因為上面說了middle是讓內聯元素在行框盒子內垂直居中，現在行框盒子(它的高度取決於他裡面的內聯元素的最大值)很小，所以我們得讓它變高點，通過在父盒子設置line-height，使得幽靈空白節點高度變高，進而撐高了我們的行框盒子。所以css再加上一句如下
.box {
width: 300px;
height: 300px;
border: 1px dashed pink;
line-height: 300px;
}
這樣就能近似垂直居中了。
另外對於table-cell元素設置vertical-align垂直對齊的是子元素(就算是塊級元素)，這點比較特殊。
再看個慄子
<div class="box1">
<img src="image/pic02.jpg" alt="">
</div>
.box1 {
width: 280px;
outline: 1px solid #aaa;
text-align: center;
}
.box1 img {
height: 95px;
}
效果是這樣的
圖片下方有點空白間隙，這就是幽靈空白點造成的，因為他們預設是基線對齊，幽靈空白節點的font-size繼承於父元素，所以會有參差位移。解決辦法有四種：1、使img塊狀化 2、把幽靈空白點的line-height或font-size變得足夠小 3、改變對齊方式，不要基線對齊了。
下麵是改font-size
.box1 {
width: 280px;
outline: 1px solid #aaa;
text-align: center;
font-size: 0;
}
增加一句font-size 為0，這樣就可以解決了
屬性值
-
數值百分比之類
先看下代碼
<div class="box"> 2x <span></span> </div>span { display: inline-block; width: 200px; height: 200px; background-color: pink; }結果如下
預設情況下和基線對齊，也就是x的底部。
改下span的樣式
span {
display: inline-block;
width: 200px;
height: 200px;
background-color: pink;
vertical-align: 10px;
}
效果如下
圖片上移了10px，也就是說正數為上移，負數為下移，誰用誰移動。
vertical-align的百分比值是相對於line-height而計算的
-
線性類數值
baseline(基線)、middle、top、bottom上面有記錄。
-
文本類屬性值
text-top： 盒子的頂部和父級內容區域的頂部對齊。
text-bottom：盒子的底部和父級內容區域的底部對齊。
-
上標下標
sub和super,本身sub和sup標簽也是實現vertical-align的屬性值。
結語
讀css世界記錄的筆記
