css中vertical-aling與line-height
基線
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