資訊專欄INFORMATION COLUMN
摘要：相關內聯格式上下文主要影響內布局的行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素都會共同生成一個行盒模型。
前言
通常情況下，要使元素排列在一行內，通常做法就是使用float，然后再清浮動。
如下：
但是如果要使其垂直居中，則必須手動調整，藍色或者綠色塊的位置，比較繁瑣。
或者另外一種方法，使用inline-block或inline（即IFC），剛好在這里碰到了點坑。
相關cssIFC（Inline formatting contexts）內聯格式上下文 ╮(￣▽￣)╭
主要影響IFC內布局的css
font-size
line-height
height
vertical-aligin
line-box行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素（inline-level element）都會共同生成一個行盒模型。
font-size常見的屬性，用來指定文本類型節點的大小。IFC內的很多屬性的值是基于這個的。
line-height & height行高在w3c中更明確的定義：
On a block container element whose content is composed of inline-level elements, "line-height" specifies the minimal height of line boxes within the element.The minimum height consists of a minimum height above the baseline and a minimum depth below it。
在一個由多個內聯元素組成的塊狀容器內，"line-height"為內聯元素的行盒模型指定了一個最低高度。
這個最低高度是分別由基線上的最小高度和基線下的最小深度組成。
盜張圖的來示意下，從上到下四條線分別是頂線、中線、基線、底線。
那么行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離（實際在數值上，行高也等于其它相同顏色間的距離）。
換種思路來理解下行高。
實際上很多情況下，一個容器中是只有一行的即只有一條基線，行高是如何計算，以確保這個間距呢?
如下：
藍色是容器的范圍，邊界線之間是一個line box。文字其中的內聯元素。
所以，
當line-height > font-size時一個為被設定高度的容器被設定一個行高時，內聯元內容的上下會增加2個空白內容的高度。而容器的高度也會撐開，使容器的高度與line-height相等。
a1 + b1 +c1 == line-height & a1 == c1
如果容器的高度已經被設定，那么超出容器下邊界線的部分則不影響布局。
當line-height < font-size時，容器未被指定高度時，容器的上下兩側塌陷(類似于margin為負值的情況)，但上述公式仍成立。
a1（負值） + b1 + c1(負值) == line-height & a1 == c1
如下所示:
白色是塌陷的部分(即 a1 和 c1)，紅色是line-height，如果把容器設置為 overflow:hidden,
那么就只能看見紅色的部分。
如果容器被指定height高度時，
height > line-height，那么黃線會下移，紅色部分會展示更多，
height < line-height，那么黃線會上移，紅色的部分被遮蓋的更多了。
所以在這里的情況是，
vertical-align決定容器高度的優先級 height > line-height > font-size
垂直對齊線，默認為baselien，來自W3C的定義：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
該屬性影響由多個內聯元素生成的盒模型組成的行內盒模型的垂直定位
vertical有幾個特定的值，或者指定一個值。
English中文 中文English
給第一個span，設置60px的垂直偏移量，顯示如下：
其中，黃色線就是基線（baseline），綠線和黃線的間隔即為60px。
這里會發現，容器（藍色）的高度被撐高了。
容器的高度 height = line-height + vertical-align
當然同理,如果容器的高度被指定了，那么高度則不變，而超出的部分則不影響布局。如果設置overflow:hidden，超過的部分則不可見。
而vertical-align的其它特殊值，均可以看做一個根據容器高度而變化的相對值。
結論熟練使用inline-level element和行內布局的屬性，以非常快速完成垂直居中和水平居中的效果，并且有良好的可維護性和拓展性。
參考W3C IFC
W3C line-height和vertical-aligin
line-height詳解
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111100.html
摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設置為子元素設置為距上，據左，然后減去元素自居中問題： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理： position: fixed; top: 0; bottom: 0; ...
摘要：前言還有幾天就到國慶中秋了，快要放假了，先祝大家節日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個網頁都離不開，但是對于，很多開發者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細節或者優化，不需要怎么考慮。 1.前言 還有幾天就到國慶中秋了，快要放假了，先祝大家節日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個網頁都離不開c...
摘要：前言還有幾天就到國慶中秋了，快要放假了，先祝大家節日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個網頁都離不開，但是對于，很多開發者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細節或者優化，不需要怎么考慮。 1.前言 還有幾天就到國慶中秋了，快要放假了，先祝大家節日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個網頁都離不開c...
摘要：篇塊級元素行內元素文檔流將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。 CSS篇 1.塊級元素 VS 行內元素 文檔流!將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。 塊級元素：自動換行；垂直排列；width/height/margin/padding都可控制；默認寬度100%，除非設置width/margindiv , ...
閱讀 1458·2021-11-22 13:54
閱讀 4380·2021-09-22 15:56
閱讀 1830·2021-09-03 10:30
閱讀 1328·2021-09-03 10:30
閱讀 2094·2019-08-30 15:55
閱讀 1862·2019-08-30 14:13
閱讀 2067·2019-08-29 15:19
閱讀 2375·2019-08-28 18:13
