前端基礎問題：CSS vertical-align 屬性

Du9191發表於2021-05-11
前端CSS

CSS vertical-align 屬性與基線的那些事~

定義和用法:

vertical-align 屬性設定元素的垂直對齊方式。

vertical-align只對內聯元素（inline、inline-block、inline-table）、表格單元格元素（table-cell）生效。

說明:

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。

允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。

預設值： baseline
繼承性： no
版本： CSS1
JavaScript 語法： object.style.verticalAlign="bottom"

可能的值:

值描述
baseline 預設。元素放置在父元素的基線上。
sub 垂直對齊文字的下標。
super 垂直對齊文字的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字型的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字型的底端對齊。
length  
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。

使用：

在使用vertical-align 屬性時要了解清楚基線這個概念。

基線：

    基線的位置並不是固定的。

  •  在文字之類內聯元素中，基線是‘ 預設值：baseline ’的下邊緣位置

<div>
    <span>預設值：baseline</span>
</div>

    細心的朋友應該會發現，文字內容與盒子上下邊之間存在著空隙。這是因為內聯元素存在預設行高，而空隙正是被這預設行高撐開的。

  •  img等元素基線也是下邊緣。

 <div>
        預設值：baseline
       <img src="images/0.gif" alt="">
       <img src="images/0.gif" alt="">
 </div>

    img元素下邊的空隙是要和父元素的基線看齊造成的，而與第二張img之間的空隙是：它們之間存在回車、換行或者空格（解決辦法1、解決辦法2）

  • 在inline-block元素中，如果該元素內沒有內聯元素或者overflow不是visible，其基線就是margin的邊緣。

<div>
    123<span style="line-height: 50px;">預設值：baseline</span>  
    <img src="images/0.gif" alt="">
    <span style="display: inline-block; overflow: hidden;height: 80px;">xxx</span> 
</div>

小結：每個行內元素的基線都要向父元素字型基線看齊。當父元素或子元素的行高和字型大小樣式改變的時候，會使得父元素基線位置改變，從而使得行內元素的位置整體上下移動。

父元素預設line-height和font-size的存在，也有可能會悄悄地影響佈局。

 

前端小白，有哪些不足的地方，還請大家多多指教！

 
 

————————————————
資料參考：

CSDN作者：「651423」
原文連結：https://blog.csdn.net/u013007731/article/details/79242619

CSDN作者：「」
原文連結：https://blog.csdn.net/weixin_43599212/article/details/107584461

簡書作者：「Iam_Bling」
原文連結：https://www.jianshu.com/p/ce7e4a997a2c

部落格園作者：「lylszo」

原文連結：https://www.cnblogs.com/lylszo/p/12622391.html

 

相關文章