前端碎語（1）

susheng 發(fā)布于2019-08-28 18:13 / 3215人閱讀

摘要：因為基線的不同，這就會導致內(nèi)聯(lián)元素在默認使用定位時，會出現(xiàn)同一行元素的錯位問題。那么有沒有和基線一樣的確定準則呢當然有，一個業(yè)界公認的標準就是同一行內(nèi)聯(lián)元素中，中線穿過的是小寫的中點。

暑假前因為種種原因沒有把百度IFE的先期課程學完，這個暑假又參加了相關(guān)項目開發(fā)，邊做邊學也總結(jié)了一些教訓?，F(xiàn)在打算寫一個系列的文章，把這種集中學習中遇到一些令我的困擾一時的點好好再總結(jié)一番。而這些因應(yīng)工程實踐而生的點本身又多是瑣碎的技術(shù)細節(jié)，若讀者正好有相應(yīng)的疑惑，也希望能給你解決問題提供一定幫助。

inline-block元素間自動產(chǎn)生間隙問題

這是一個比較經(jīng)典的問題了，橫向的間隙與HTML代碼中inline-block元素和別的元素間有空格有關(guān)，而縱向的則是由于垂直方向上inline-block下緣默認與自動生成的匿名框的baseline對齊后，baseline下面剩下的行高（baseline類似我們書寫英文的四線本子上那倒數(shù)第二根線，更多解釋可見張鑫旭這篇文章或者他新出的css課程）。這些自動產(chǎn)生的空隙一般不是我們做布局時想要的，比如下面這個demo中定高容器里的黃塊硬是被圖片給擠下去了。而解決方法便是消除img元素產(chǎn)生的空隙：

因為只是在容器里上下布局，對于圖片可直接讓其display: block;，

還可以抓住源頭，讓圖片的vertical-align: 非baseline;

或者在container上設(shè)置line-height: 0;，行高沒有了空隙也就沒啦

與第3種同理，在container上設(shè)置font-size: 0;，在有需要添加文字的地方再設(shè)置字號即可

上面例子是針對縱向的空隙；至于橫向的方法就更多了。

demo

具有button特點的元素和其他元素計算寬高的不同

這個問題在搜索框和搜索按鈕這一組合上經(jīng)常遇見（demo見下面）。不過搜索按鈕常為type="submit"的input元素，但其也特性類似于button元素，那就是它們的width/height=內(nèi)容的width/height；而其他元素則是width/height=內(nèi)容的width/height+padding+border。不同的原因在于前者默認box-sizing: border-box;，而后者默認為box-sizing: content-box;。

所以解決方法就是將兩者的box-sizing統(tǒng)一，要么將搜索框設(shè)置box-sizing: border-box;，要么將搜索按鈕設(shè)置box-sizing: content-box;。而至于它們中間那個有點礙眼的空隙，我相信讀者們也應(yīng)該會自己去掉了吧？

demo

同處一行的block和inline-block元素對齊問題

這個問題的demo見下，其中幾個內(nèi)容不相同（有文字、有block）的inline-block元素實現(xiàn)并列時，出現(xiàn)了垂直方向上對不齊的問題。后來我對wrapper使用vertical-align:middle;解決了該問題。

demo

解決之后，這個問題背后的原理卻至今是個讓我頭疼的東西。因為里面涉及line-height和vertical-align兩個屬性的種種糾結(jié)。我們知道，inline或inline-block元素在垂直方向上默認以其baseline與父元素的baseline對齊。于是我想了如下一個解釋：

wrapper與container的baseline對齊后，wrapper內(nèi)部的文字也與wrapper保持baseline對齊，此時文字再加上line-height撐開無名行內(nèi)框會導致wrapper也被撐起，進而偏離原來對齊方式。而文字的line-height對container的baseline也會造成偏移，并以此進一步影響container中其他wrapper。-demo-

所以結(jié)論就是，我遇到的對不齊的情況是文字依靠line-height控制了其wrapper以及container的baseline位置。若將wrapper全部修改為vertical-align:middle;則破解了其控制。-demo-

貌似還能解釋得通，然而繼續(xù)深究下去，比如我只把第一個wrapper設(shè)置vertical-align:middle;，-demo- 則wrapper相比默認情況出現(xiàn)了下移，這可以解釋為第一個wrapper與container中間對齊時即相比baseline對齊有所下移，文字再次按撐開行高。
但wrapper與container中間對齊時應(yīng)該相比baseline對齊上移才對（比如上個demo中間兩個wrapper），為何還會出現(xiàn)下移呢？

更進一步，若是光把wrapper里的文字設(shè)置vertical-align:middle;則不僅僅文字出現(xiàn)了下移，還在未修改line-height時改變了wrapper高度。-demo- 這又是為何？

當然這畢竟不是什么影響開發(fā)的大問題，而且這種摳細節(jié)、深究css原理的的問題也不是那么容易講清楚的，所以至今我找了許多資料也未能讓我明了。但如果各位讀者有這方面的解決思路，非常歡迎與我交流~

2016.5.27更新：
回過頭來重新研究了下，看了一些新資料后發(fā)現(xiàn)之前的結(jié)論其實不太對，解決這個對齊問題的關(guān)鍵就是vertical-align的定位機制而已，和line-height本身沒有多大關(guān)系。

但在開始討論之前，必須得先理清vertical-align的作用對象，該屬性只是對設(shè)置了它的內(nèi)聯(lián)元素起作用而已，對其子元素是沒有影響的。千萬別因為它和垂直定位有關(guān)，就把它的作用和text-align混淆，我就是因為這么疏忽大意浪費了不少時間。

關(guān)于基線對齊
好了，接下來就可以來討論vertical-align的定位機制了，由于該屬性默認值為baseline，這也是我們最常遇到的情況，其定位效果就是讓內(nèi)聯(lián)元素的基線和同一行的元素的基線相對齊。但要注意同一行內(nèi)每個元素的基線未必是相同的，具體解釋可參考這篇文章，這里只提一下結(jié)論：

內(nèi)聯(lián)元素基線的確定：
一個inline-block元素，如果里面沒有inline內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣；否則，其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。

因為基線的不同，這就會導致內(nèi)聯(lián)元素在默認使用vertical-align:baseline定位時，會出現(xiàn)同一行元素的錯位問題。這樣，上面的第一個demo就能解釋了，中間那個元素沒有內(nèi)聯(lián)子元素，其基線為margin底邊緣；而左右兩側(cè)的兩個由于內(nèi)含文字，基線為文本底端，由于三者的基線要對齊，結(jié)果自然就會有錯位。第二個demo同樣也是基線定位導致的問題，只是行高變大了點導致文本溢出、基線也溢出來罷。

關(guān)于中線對齊
接下來研究下為何設(shè)置vertical-align:middle就能使錯位情況消失（也就是第三個demo的情況）。

通過上面對基線對齊的討論，你可能會認為中線對齊就是指定元素中線和同一行元素的中線對齊而已。但很遺憾，這樣并不太對，某個元素的中線可以說橫穿正中間，而與它同一行元素卻可能有不同的大小，甚至被已經(jīng)被設(shè)置了不同的對齊方式、有不同的“所謂中線”，這樣就不能籠統(tǒng)地得出“同一行元素的中線”的概念。上面讓我頭疼的demo4和demo5就是這種情況，因為它們在同一行中混雜了中線對齊和基線對齊，所以中線的確定并不是像我原來想的那么簡單。

那么有沒有和基線一樣的確定準則呢？當然有，一個業(yè)界公認的標準就是同一行內(nèi)聯(lián)元素中，中線穿過的是小寫x的中點。也就是說，所謂中線對齊就是橫穿指定元素正中間那條線，與同一行元素的小寫x中點相對齊。

所以設(shè)置vertical-align:middle能使錯位情況消失并沒有什么神奇的，只是三個內(nèi)聯(lián)元素的中線一致對齊了而已。至于demo4和demo5，各位可在各個wrapper外加上幾個x看看中線對齊是不是真的這樣，只要理解了對齊方式，這兩個demo的錯位現(xiàn)象也就很好解釋了。

其他對齊方式
其實通過上面的討論，可以知道要理清vertical-align的定位機制，只要抓住指定元素的哪根線和父元素的哪根線相對齊即可。至于他的對齊方式也不外乎就是對齊的線不同而已，具體可參見MDN吧，上面寫得夠詳細了。