基線

baseline：字元x的底部

x-height: 字母x的高度，vertical-aling設定為middle的時候，對齊的是baseline往上1/2的x-height，所以vertical-aling設定為middle不是整正的居中對齊

​

line-height

1.內容高度

思考：未設定height的時候，可視高度由什麼決定？

.box {
    line-height: 0;
}
.box1 {
    line-height: 12px;
}
.box2 {
    line-height: 12px;
  font-size: 0;
}
<div class="box">
  內容內容
</div
 
>

元素的高度是由line-height撐起來

思考：對於非替換元素，line-height會影響元素高度嗎？

.box {
    line-height: 0;
}
.box1 {
    line-height: 120px;
}
<div class="box">
     <img src=''>
</div>

2.行距

兩行文字之間的間隙

3.line-height屬性值

normal:

預設是normal，與字型、瀏覽器有關，在1.2左右

長度值：

帶單位的，直接按照這個值進行計算

數值：

最終的計算值是和當前 font-size 相乘後的值

百分比：

最終的計算值是和當前 font-size 相乘後的值。

父元素設定了百分比，子元素繼承的不是百分比，而是父元素計算後的值

vertical-align

只能應用於內聯元 素以及 display 值為 table-cell 的元素。

1.baseline

基線對齊

2.數值

相對基線上下移動

問題

1.不同字號文字在一起時，內容高度

box { 
  line-height: 32px; 
}
.box > span { 
  font-size: 24px;
}
<div class="box">
    x<span>文字x</span>
</div>
 

​

文字預設是基線對齊，不同大小文字的基線對齊的時候，會發生上下唯一，如果唯一距離夠大，就會產生意料之外的高度

​

2.思考：box高度是多少

.box { 
  line-height: 32px; 
}
.box > span { 
  font-size: 24px; 
}
<div class="box">
 <span>文字</span>
</div> 

結果：會比32px大一些

​

這是因為在html5 文件模式下，每一個“行框盒 子”的前面都有一個寬度為0的空白節點 - 幽靈空白元素，內聯特性表現和普通字元相同

等同於如下：

​
由於空白節點的字型大小和元素內字型大小不同，導致發生位移，使元素高度撐高

幽靈空白節點還會帶來很多問題

如圖片高度問題：

塊級元素高度總是會比圖片高度大一些，這是因為存在幽靈空白元素，由於vertical-aling預設是baseline,導致空白元素撐高了塊級元素。

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com