資訊專欄INFORMATION COLUMN
摘要：因為基線的不同，這就會導致內聯元素在默認使用定位時，會出現同一行元素的錯位問題。那么有沒有和基線一樣的確定準則呢當然有，一個業界公認的標準就是同一行內聯元素中，中線穿過的是小寫的中點。
暑假前因為種種原因沒有把百度IFE的先期課程學完，這個暑假又參加了相關項目開發，邊做邊學也總結了一些教訓。現在打算寫一個系列的文章，把這種集中學習中遇到一些令我的困擾一時的點好好再總結一番。而這些因應工程實踐而生的點本身又多是瑣碎的技術細節，若讀者正好有相應的疑惑，也希望能給你解決問題提供一定幫助。
inline-block元素間自動產生間隙問題這是一個比較經典的問題了，橫向的間隙與HTML代碼中inline-block元素和別的元素間有空格有關，而縱向的則是由于垂直方向上inline-block下緣默認與自動生成的匿名框的baseline對齊后，baseline下面剩下的行高（baseline類似我們書寫英文的四線本子上那倒數第二根線，更多解釋可見張鑫旭這篇文章或者他新出的css課程）。這些自動產生的空隙一般不是我們做布局時想要的，比如下面這個demo中定高容器里的黃塊硬是被圖片給擠下去了。而解決方法便是消除img元素產生的空隙：
因為只是在容器里上下布局，對于圖片可直接讓其display: block;，
還可以抓住源頭，讓圖片的vertical-align: 非baseline;
或者在container上設置line-height: 0;，行高沒有了空隙也就沒啦
與第3種同理，在container上設置font-size: 0;，在有需要添加文字的地方再設置字號即可
上面例子是針對縱向的空隙；至于橫向的方法就更多了。
demo
具有button特點的元素和其他元素計算寬高的不同這個問題在搜索框和搜索按鈕這一組合上經常遇見（demo見下面）。不過搜索按鈕常為type="submit"的input元素，但其也特性類似于button元素，那就是它們的width/height=內容的width/height；而其他元素則是width/height=內容的width/height+padding+border。不同的原因在于前者默認box-sizing: border-box;，而后者默認為box-sizing: content-box;。
所以解決方法就是將兩者的box-sizing統一，要么將搜索框設置box-sizing: border-box;，要么將搜索按鈕設置box-sizing: content-box;。而至于它們中間那個有點礙眼的空隙，我相信讀者們也應該會自己去掉了吧？
demo
同處一行的block和inline-block元素對齊問題這個問題的demo見下，其中幾個內容不相同（有文字、有block）的inline-block元素實現并列時，出現了垂直方向上對不齊的問題。后來我對wrapper使用vertical-align:middle;解決了該問題。
demo
解決之后，這個問題背后的原理卻至今是個讓我頭疼的東西。因為里面涉及line-height和vertical-align兩個屬性的種種糾結。我們知道，inline或inline-block元素在垂直方向上默認以其baseline與父元素的baseline對齊。于是我想了如下一個解釋：
wrapper與container的baseline對齊后，wrapper內部的文字也與wrapper保持baseline對齊，此時文字再加上line-height撐開無名行內框會導致wrapper也被撐起，進而偏離原來對齊方式。而文字的line-height對container的baseline也會造成偏移，并以此進一步影響container中其他wrapper。-demo-
所以結論就是，我遇到的對不齊的情況是文字依靠line-height控制了其wrapper以及container的baseline位置。若將wrapper全部修改為vertical-align:middle;則破解了其控制。-demo-
貌似還能解釋得通，然而繼續深究下去，比如我只把第一個wrapper設置vertical-align:middle;，-demo- 則wrapper相比默認情況出現了下移，這可以解釋為第一個wrapper與container中間對齊時即相比baseline對齊有所下移，文字再次按撐開行高。
但wrapper與container中間對齊時應該相比baseline對齊上移才對（比如上個demo中間兩個wrapper），為何還會出現下移呢？
更進一步，若是光把wrapper里的文字設置vertical-align:middle;則不僅僅文字出現了下移，還在未修改line-height時改變了wrapper高度。-demo- 這又是為何？
當然這畢竟不是什么影響開發的大問題，而且這種摳細節、深究css原理的的問題也不是那么容易講清楚的，所以至今我找了許多資料也未能讓我明了。但如果各位讀者有這方面的解決思路，非常歡迎與我交流~
2016.5.27更新：
回過頭來重新研究了下，看了一些新資料后發現之前的結論其實不太對，解決這個對齊問題的關鍵就是vertical-align的定位機制而已，和line-height本身沒有多大關系。
但在開始討論之前，必須得先理清vertical-align的作用對象，該屬性只是對設置了它的內聯元素起作用而已，對其子元素是沒有影響的。千萬別因為它和垂直定位有關，就把它的作用和text-align混淆，我就是因為這么疏忽大意浪費了不少時間。
關于基線對齊
好了，接下來就可以來討論vertical-align的定位機制了，由于該屬性默認值為baseline，這也是我們最常遇到的情況，其定位效果就是讓內聯元素的基線和同一行的元素的基線相對齊。但要注意同一行內每個元素的基線未必是相同的，具體解釋可參考這篇文章，這里只提一下結論：
內聯元素基線的確定：
一個inline-block元素，如果里面沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣；否則，其基線就是元素里面最后一行內聯元素的基線。
因為基線的不同，這就會導致內聯元素在默認使用vertical-align:baseline定位時，會出現同一行元素的錯位問題。這樣，上面的第一個demo就能解釋了，中間那個元素沒有內聯子元素，其基線為margin底邊緣；而左右兩側的兩個由于內含文字，基線為文本底端，由于三者的基線要對齊，結果自然就會有錯位。第二個demo同樣也是基線定位導致的問題，只是行高變大了點導致文本溢出、基線也溢出來罷。
關于中線對齊
接下來研究下為何設置vertical-align:middle就能使錯位情況消失（也就是第三個demo的情況）。
通過上面對基線對齊的討論，你可能會認為中線對齊就是指定元素中線和同一行元素的中線對齊而已。但很遺憾，這樣并不太對，某個元素的中線可以說橫穿正中間，而與它同一行元素卻可能有不同的大小，甚至被已經被設置了不同的對齊方式、有不同的“所謂中線”，這樣就不能籠統地得出“同一行元素的中線”的概念。上面讓我頭疼的demo4和demo5就是這種情況，因為它們在同一行中混雜了中線對齊和基線對齊，所以中線的確定并不是像我原來想的那么簡單。
那么有沒有和基線一樣的確定準則呢？當然有，一個業界公認的標準就是同一行內聯元素中，中線穿過的是小寫x的中點。也就是說，所謂中線對齊就是橫穿指定元素正中間那條線，與同一行元素的小寫x中點相對齊。
所以設置vertical-align:middle能使錯位情況消失并沒有什么神奇的，只是三個內聯元素的中線一致對齊了而已。至于demo4和demo5，各位可在各個wrapper外加上幾個x看看中線對齊是不是真的這樣，只要理解了對齊方式，這兩個demo的錯位現象也就很好解釋了。
其他對齊方式
其實通過上面的討論，可以知道要理清vertical-align的定位機制，只要抓住指定元素的哪根線和父元素的哪根線相對齊即可。至于他的對齊方式也不外乎就是對齊的線不同而已，具體可參見MDN吧，上面寫得夠詳細了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111102.html
摘要：和并不是一個標準的屬性，才是，所以火狐長久以來都不支持，同時也不支持。 這個系列保持開坑不埋的狀態已經過去三個月了，而在這幾個月中我才算第一次認真地深入理解js。雖然期間筆記是記了不少，但寫博文又不應是簡單的復制粘貼，還是得保證有討論價值、有干貨的。而我面對的現實是：一來基礎差導致識別和撈出有討論價值的干貨得自身功夫練到一定階段，二來又因為記的雜亂且缺乏日常整理，整理一下就是拖一下，再...
閱讀 529·2023-04-25 14:26
閱讀 1285·2021-11-25 09:43
閱讀 3476·2021-09-22 15:25
閱讀 1446·2019-08-30 15:54
閱讀 519·2019-08-30 12:57
閱讀 765·2019-08-29 17:24
閱讀 3166·2019-08-28 18:13
閱讀 2671·2019-08-28 17:52
