關於行框盒子與vertical-align（一）

vertical-align屬性是css經常使用屬性，在剛剛接觸到他時，他是這麼跟我介紹本身的

vertical-align: baseline; 元素放置在父元素的基線上

這句話一直誤導了我很長時間，我潛意識中覺得他所說的父元素就是子元素使用vertical-align屬性的元素，在每次vertical-align屬性出現bug時我還傻敷敷的在想，這個父元素的基線到底在哪呢？inlin、block、inline-block元素的基線究竟是怎麼肯定的呢？這對齊位置怎麼跟我想象中的不同呢？

唉。。。。一言難盡。。。

直到後來看了張鑫旭等一票大神對於vertical-align深刻理解的教程和博客後，發現我大錯特錯，vertical-align: baseline;真正的做用實際上是

vertical-align: baseline; 設置該屬性的元素的基線與元素所在的行框盒子(line box)的基線對齊。

我diao~

css真是博大精深

嚇得我趕忙把相關知識整理了一下，省得之後犯迷糊

基線中線底線與頂線

行框盒子模型

內容區域content area

底線和頂線包裹的區域，行內元素能夠經過設置background-color屬性顯示出來

能夠近似理解爲上圖中文字選中時底色區域的大小

內容區的大小 只與文字大小和字體有關，在simsun字體下其高度近似於字體大小。

若是你的行高是定值，在字體增大致使content area高度超過行高後，它就會撐大下面要說的內聯盒子inline box的高度

內聯盒子inline boxes

在沒有其餘因素影響的時候，inline boxes高度就等於content area高度（line-height要設爲零，由於行高默認值normal會設定合適大小的行高），而設定行高則能夠增長或者減小inline boxes的高度。

即：將行距的值（行高 - 字體尺寸）除以2，並分別增長到content area的上下兩邊。咱們常常經過設置行高與容器高度一致從而使單行文字垂直居中就是利用了這個原理，其實真正被居中的是content area

那設置行高後，行高===inline boxes高？？？

非也，上面說過若是你的字體夠大致使content area突破了行高的限制，或者插入了一張高度大於行高的圖片，就會把inline boxes的高度撐開，但並不會影響行高

inline水平的標籤元素和直接寫在父標籤裏的文字都會造成inline boxes

line box的高度會影響下面所說的行框盒子line boxes的高度

行框盒子line boxes

行框盒子line boxes就像包裹住一行內容的一個虛擬的矩形框，由一個個inline boxes組成

其高度等於本行內全部inline boxes高度的最大值

一個塊級元素的內容高度是由一個一個line boxes堆起來的，對於內容只有一行的，塊級元素的內容高度即爲line boxes的高度

vertical-align

vertical-align: baseline

默認屬性，上面說了該屬性的做用是將設置該屬性的元素的基線與元素所在的行框盒子(line boxes)的基線對齊。

那麼基線位置如何肯定呢

對於line boxes裏的inline boxes來講

inline-block元素的基線是正常流中最後一個line boxes的基線,除非這個元素裏面沒有

line boxes或者自己’overflow’屬性不是’visible’,這種狀況下其基線是margin底邊緣

如img圖像標籤引入的圖片的基線就是圖片底部， textarea標籤也是底部，沒有任何元素的inline-block水平元素也是底部

inline水平元素的基線就是它內部文字的基線

那麼line boxes的基線位置如何肯定呢？

其實只需想象其內部有一個看不見的x在就能夠了，其基線就是看不見的字母x的基線，且基線的位置是不會變的

以下咱們在div元素中寫了一個x，用它模擬上面所提到的看不見的字母x，二者效果是同樣的

<div style="">
    x
    <span style="">xspan1</span>
    <input style="">
</div>複製代碼

將span的vertical-align設爲bottom以後你會發現input輸入框的中心線是和div裏x的底部對齊的，和span裏的x底部就會有偏移。

position: absolute和float會直接使元素脫離文檔流，能夠當作它沒有被包含在line boxes裏,vertical-align不起做用，也不能用來判斷基線位置

vertical-align: middle

元素中垂線與父元素的基線加上小寫x一半的高度值對齊

常常用於inline-block元素的垂直居中對齊

可是因爲字體不一樣，1/2x的位置也是不同的，宋體有些下沉

而且隨着字體尺寸的增大這個bug會變得愈來愈明顯，能夠給文字包裹一層標籤單獨設置字體尺寸而後設父元素字體大小爲零，能夠解決這個bug

基線的位置不會變，設置vertical-align改變的是元素自身的對齊方式改變的是元素位置

有的時候你會發如今給元素設置了vertical-align值後，他本身不動反而是相鄰元素的位置改變了

其實並非

以下

<div style="line-height: 100px;background: #f1faf1;">
    <div style="display: inline-block; height: 40px; vertical-align: middle; width: 100px; background: bisque;">
    </div>
    <span style="vertical-align: middle;">xxxx</span>
</div>複製代碼

設置父元素行高100px將line boxes高度撐開後分別設置inline-block級元素div和inline級元素span 的對齊方式爲vertical-align: middle;兩元素乖乖本身上下移動對齊的

<div style="line-height: 100px;background: #f1faf1;">
    <div style="display: inline-block; height: 40px; width: 100px; background: bisque;">
    </div>
    <span style="vertical-align: middle;line-height: 140px;">xxxx</span>
</div>複製代碼

咱們將span的行高設爲140px,再設置其對齊方式

這時span本身沒有動，他旁邊的div發生了移動

其實，並非div發生了移動，移動的仍是span，只不過這時line boxes的高度是由span撐開決定的，因此視覺上就像是div移動了。