前端碎語（1）

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

摘要：因?yàn)榛€的不同，這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí)，會(huì)出現(xiàn)同一行元素的錯(cuò)位問題。那么有沒有和基線一樣的確定準(zhǔn)則呢當(dāng)然有，一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中，中線穿過的是小寫的中點(diǎn)。

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

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

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

因?yàn)橹皇窃谌萜骼锷舷虏季?，?duì)于圖片可直接讓其display: block;，

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

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

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

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

demo

具有button特點(diǎn)的元素和其他元素計(jì)算寬高的不同

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

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

demo

同處一行的block和inline-block元素對(duì)齊問題

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

demo

解決之后，這個(gè)問題背后的原理卻至今是個(gè)讓我頭疼的東西。因?yàn)槔锩嫔婕?b>line-height和vertical-align兩個(gè)屬性的種種糾結(jié)。我們知道，inline或inline-block元素在垂直方向上默認(rèn)以其baseline與父元素的baseline對(duì)齊。于是我想了如下一個(gè)解釋：

wrapper與container的baseline對(duì)齊后，wrapper內(nèi)部的文字也與wrapper保持baseline對(duì)齊，此時(shí)文字再加上line-height撐開無名行內(nèi)框會(huì)導(dǎo)致wrapper也被撐起，進(jìn)而偏離原來對(duì)齊方式。而文字的line-height對(duì)container的baseline也會(huì)造成偏移，并以此進(jìn)一步影響container中其他wrapper。-demo-
所以結(jié)論就是，我遇到的對(duì)不齊的情況是文字依靠line-height控制了其wrapper以及container的baseline位置。若將wrapper全部修改為vertical-align:middle;則破解了其控制。-demo-

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

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

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

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

但在開始討論之前，必須得先理清vertical-align的作用對(duì)象，該屬性只是對(duì)設(shè)置了它的內(nèi)聯(lián)元素起作用而已，對(duì)其子元素是沒有影響的。千萬別因?yàn)樗痛怪倍ㄎ挥嘘P(guān)，就把它的作用和text-align混淆，我就是因?yàn)檫@么疏忽大意浪費(fèi)了不少時(shí)間。

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

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

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

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

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

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

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

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