深入理解CSS中的vertical-align屬性和基線問(wèn)題
我要評(píng)論vertical-align屬性主要用于改變行內(nèi)元素的對(duì)齊方式，對(duì)于行內(nèi)布局影響很大，如果不了解的話，我們開(kāi)發(fā)調(diào)整樣式的時(shí)候很容易出錯(cuò)。
網(wǎng)上關(guān)于這個(gè)屬性的原理說(shuō)得很是復(fù)雜，看一眼就讓人覺(jué)得望而生畏，而且大可不必完全理解其原理，只要懂得其規(guī)律，我們足夠使用即可，下面把我的理解分享給大家：
基線
要了解vertical-align屬性，必須懂得基線，怎么理解基線呢？
1、我們寫網(wǎng)頁(yè)是在一個(gè)矩形的顯示屏上，經(jīng)常是一行一行來(lái)布局，不可避免的是一行中會(huì)有多個(gè)內(nèi)容，那么這行內(nèi)容是如何上下對(duì)齊的呢？答案就是默認(rèn)讓他們的基線對(duì)齊。
2、各種字體、圖片、行內(nèi)html元素等可展示的內(nèi)容都有各自的基線，要想知道具體內(nèi)容的基線我們可以找一個(gè)簡(jiǎn)單的參照物：小寫字母“x”，為什么找它呢？因?yàn)橛⑽淖帜傅幕€恰好就是小寫"x"的最下方，比較容易看出。
知道了以上兩點(diǎn)我們就可以很容易知道其他內(nèi)容元素的基線位置了，把其他元素和小寫“x”放在一行展示一下就一眼可以看出了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid cyan;
font-size: 30px;
}
div .span1 {
display: inline-block;
background-color: green;
}
div .span2 {
display: inline-block;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div>
x
<img src="./demo.jpg" alt="">
漢字
<input type="text">
<button>按鈕</button>
<span class="span1">span1</span>
<span class="span2">span2</span>
</div>
</body>
</html>
如上圖紅色為該行元素基線，可以發(fā)現(xiàn)圖片和overflow:hidden樣式的元素的基線位置是最下方，中文、輸入框和button按鈕的基線位置都在中下方的位置。可以看出，這些行內(nèi)元素的排列是先按基線上下對(duì)齊，然后把父元素?fù)伍_(kāi)。
值得注意的一點(diǎn)是，如果我們直接往div中放入一個(gè)圖片，會(huì)發(fā)現(xiàn)圖片底部距離div的下方有一個(gè)空隙；這是因?yàn)?行內(nèi)元素各自基線對(duì)齊以后還要和父元素的字體基線保持一致， 換句話說(shuō)： 每個(gè)行內(nèi)元素的基線都要向父元素字體基線看齊。 但當(dāng)父元素的行高和字體大小樣式改變的時(shí)候，會(huì)使得父元素字體基線位置改變，從而使得行內(nèi)元素的位置整體上下移動(dòng)。雖然我們只看到了一個(gè)圖片沒(méi)有看到字，但是父元素有默認(rèn)的line-height和font-size，也會(huì)悄悄地影響布局，你會(huì)發(fā)現(xiàn)再往div中放入了一個(gè)小寫字母“x”，如下圖，它的下方剛好占據(jù)了空隙的位置。所以知道了這個(gè)原因，想去掉這個(gè)空隙的話，只需要把父元素的line-height和font-size設(shè)置為0，或者把圖片設(shè)置成塊級(jí)元素，讓它獨(dú)占一行就可以了。同樣的，如果div中直接放入一個(gè)input輸入框，輸入框上方也會(huì)有個(gè)空隙，與此類似，只是圖片和輸入框的基線位置不同罷了。
vertical-align屬性
了解了上述行內(nèi)元素的排序原則，我們可能會(huì)有個(gè)疑問(wèn)：如果我們需要某些行內(nèi)元素不按照基線排列怎么辦？答案就是使用vertical-align屬性。
首先，vertical-align屬性是針對(duì)行內(nèi)元素才有效果，它改變了當(dāng)前行內(nèi)元素和父元素字體兩者之間的對(duì)齊方式，默認(rèn)值是baseline，即兩者基線對(duì)齊，如上面我們測(cè)試的一樣。
關(guān)于各個(gè)屬性值可參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align ，可簡(jiǎn)單在div中加入小寫字母“x”和一張圖片分別切換屬性進(jìn)行驗(yàn)證即可。
有兩個(gè)屬性稍作解釋：
1、當(dāng)設(shè)置屬性為"%"的時(shí)候，指的是當(dāng)前行內(nèi)元素的line-height屬性值的占比，可以設(shè)置成正負(fù)值，行內(nèi)元素基線相對(duì)父元素字體基線上下移動(dòng)這個(gè)百分比的距離。如下圖，設(shè)置圖片vertical-align: 50%; line-height: 30px; 本來(lái)圖片最下方應(yīng)該和"x"底部對(duì)齊的，現(xiàn)在上移了15px，如果是-50%，就會(huì)相對(duì)下移15px。當(dāng)然也可以直接設(shè)置為length，vertical-align：15px;效果也是一樣的。
2、當(dāng)設(shè)置屬性為“middle”的時(shí)候，行內(nèi)元素中間位置會(huì)和父元素字體基線上方1/2"x-height"位置對(duì)齊，“x-height”其實(shí)就是父元素中小寫字母“x”的高度，簡(jiǎn)單來(lái)說(shuō)，就是行內(nèi)元素的中間位置會(huì)和父元素中的小寫字母“x”的中間位置（x的交叉點(diǎn)）對(duì)齊，就相當(dāng)于兩者中間對(duì)齊了。
總結(jié)
到此這篇關(guān)于深入理解CSS中的vertical-align屬性和基線問(wèn)題的文章就介紹到這了,更多相關(guān)css vertical-align屬性和基線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文向大家介紹一下CSS vertical-align 屬性的用法，該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。2014-10-22
css中圖片于文本的基線對(duì)齊與vertical-align屬性設(shè)置
默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊，通過(guò)設(shè)置css屬性可以使得圖片與文字對(duì)齊，接下來(lái)為大家詳細(xì)介紹下設(shè)置各對(duì)象的vertical-align屬性，感興趣的朋友可以參考下哈2013-04-02css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說(shuō)明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性，使用過(guò)程中踩到了坑,因此整理了一些，以備不時(shí)之需，感興趣的朋友可以了解下哦2013-01-09CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中. vertical-align屬性使網(wǎng)頁(yè)層居中 網(wǎng)頁(yè)源代碼如下： <html> <2009-04-02css vertical-align屬性詳細(xì)圖解分析
vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同2009-02-10
CSS中的vertical-align用于設(shè)置行內(nèi)塊或者行內(nèi)元素行內(nèi)元素的對(duì)齊方式，使用過(guò)程中的坑很多，本文就詳細(xì)的介紹一下vertical-align屬性的具體使用方法，感興趣的可以了解一2023-05-11