資訊專欄INFORMATION COLUMN
摘要：相關(guān)內(nèi)聯(lián)格式上下文主要影響內(nèi)布局的行盒模型，這是一個顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個內(nèi)聯(lián)元素都會共同生成一個行盒模型。
前言
通常情況下，要使元素排列在一行內(nèi)，通常做法就是使用float，然后再清浮動。
如下：
但是如果要使其垂直居中，則必須手動調(diào)整，藍(lán)色或者綠色塊的位置，比較繁瑣。
或者另外一種方法，使用inline-block或inline（即IFC），剛好在這里碰到了點坑。
相關(guān)cssIFC（Inline formatting contexts）內(nèi)聯(lián)格式上下文 ╮(￣▽￣)╭
主要影響IFC內(nèi)布局的css
font-size
line-height
height
vertical-aligin
line-box行盒模型，這是一個顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個內(nèi)聯(lián)元素（inline-level element）都會共同生成一個行盒模型。
font-size常見的屬性，用來指定文本類型節(jié)點的大小。IFC內(nèi)的很多屬性的值是基于這個的。
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。
在一個由多個內(nèi)聯(lián)元素組成的塊狀容器內(nèi)，"line-height"為內(nèi)聯(lián)元素的行盒模型指定了一個最低高度。
這個最低高度是分別由基線上的最小高度和基線下的最小深度組成。
盜張圖的來示意下，從上到下四條線分別是頂線、中線、基線、底線。
那么行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離（實際在數(shù)值上，行高也等于其它相同顏色間的距離）。
換種思路來理解下行高。
實際上很多情況下，一個容器中是只有一行的即只有一條基線，行高是如何計算，以確保這個間距呢?
如下：
藍(lán)色是容器的范圍，邊界線之間是一個line box。文字其中的內(nèi)聯(lián)元素。
所以，
當(dāng)line-height > font-size時一個為被設(shè)定高度的容器被設(shè)定一個行高時，內(nèi)聯(lián)元內(nèi)容的上下會增加2個空白內(nèi)容的高度。而容器的高度也會撐開，使容器的高度與line-height相等。
a1 + b1 +c1 == line-height & a1 == c1
如果容器的高度已經(jīng)被設(shè)定，那么超出容器下邊界線的部分則不影響布局。
當(dāng)line-height < font-size時，容器未被指定高度時，容器的上下兩側(cè)塌陷(類似于margin為負(fù)值的情況)，但上述公式仍成立。
a1（負(fù)值） + b1 + c1(負(fù)值) == line-height & a1 == c1
如下所示:
白色是塌陷的部分(即 a1 和 c1)，紅色是line-height，如果把容器設(shè)置為 overflow:hidden,
那么就只能看見紅色的部分。
如果容器被指定height高度時，
height > line-height，那么黃線會下移，紅色部分會展示更多，
height < line-height，那么黃線會上移，紅色的部分被遮蓋的更多了。
所以在這里的情況是，
vertical-align決定容器高度的優(yōu)先級 height > line-height > font-size
垂直對齊線，默認(rèn)為baselien，來自W3C的定義：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
該屬性影響由多個內(nèi)聯(lián)元素生成的盒模型組成的行內(nèi)盒模型的垂直定位
vertical有幾個特定的值，或者指定一個值。
English中文 中文English
給第一個span，設(shè)置60px的垂直偏移量，顯示如下：
其中，黃色線就是基線（baseline），綠線和黃線的間隔即為60px。
這里會發(fā)現(xiàn)，容器（藍(lán)色）的高度被撐高了。
容器的高度 height = line-height + vertical-align
當(dāng)然同理,如果容器的高度被指定了，那么高度則不變，而超出的部分則不影響布局。如果設(shè)置overflow:hidden，超過的部分則不可見。
而vertical-align的其它特殊值，均可以看做一個根據(jù)容器高度而變化的相對值。
結(jié)論熟練使用inline-level element和行內(nèi)布局的屬性，以非?？焖偻瓿纱怪本又泻退骄又械男Ч?，并且有良好的可維護(hù)性和拓展性。
參考W3C IFC
W3C line-height和vertical-aligin
line-height詳解
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111100.html
摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級與樣式覆蓋在制作頁面的時候需要為很多的標(biāo)簽設(shè)置屬性，所以會導(dǎo)致頁面不夠純凈，文件體積過大不利于，后期維護(hù)成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個元素內(nèi)；比如： 一般不需要擔(dān)心樣式優(yōu)先級與樣式覆蓋 在制作頁面的時...
摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設(shè)置為子元素設(shè)置為距上，據(jù)左，然后減去元素自居中問題： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理： position: fixed; top: 0; bottom: 0; ...
摘要：前言還有幾天就到國慶中秋了，快要放假了，先祝大家節(jié)日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個網(wǎng)頁都離不開，但是對于，很多開發(fā)者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細(xì)節(jié)或者優(yōu)化，不需要怎么考慮。 1.前言 還有幾天就到國慶中秋了，快要放假了，先祝大家節(jié)日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個網(wǎng)頁都離不開c...
摘要：前言還有幾天就到國慶中秋了，快要放假了，先祝大家節(jié)日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個網(wǎng)頁都離不開，但是對于，很多開發(fā)者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細(xì)節(jié)或者優(yōu)化，不需要怎么考慮。 1.前言 還有幾天就到國慶中秋了，快要放假了，先祝大家節(jié)日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個網(wǎng)頁都離不開c...
摘要：篇塊級元素行內(nèi)元素文檔流將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。 CSS篇 1.塊級元素 VS 行內(nèi)元素 文檔流!將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。 塊級元素：自動換行；垂直排列；width/height/margin/padding都可控制；默認(rèn)寬度100%，除非設(shè)置width/margindiv , ...
閱讀 1457·2021-11-22 13:54
閱讀 4376·2021-09-22 15:56
閱讀 1828·2021-09-03 10:30
閱讀 1326·2021-09-03 10:30
閱讀 2093·2019-08-30 15:55
閱讀 1859·2019-08-30 14:13
閱讀 2066·2019-08-29 15:19
閱讀 2374·2019-08-28 18:13
