資訊專欄INFORMATION COLUMN
摘要：如果該屬性值為，用戶代理可能會拉伸行內盒不包括和盒里的空白和字間距與，，行內盒一個是一個特殊的行內級盒，其內容參與了它的包含行內格式化上下文當一個超出一個的寬度時，它會被分成幾個盒，并且這些盒會跨多分布。
IFC布局規則:
在一個行內格式化上下文中，盒是一個接一個水平放置的，從包含塊的頂部開始
這些盒之間的水平margin，border和padding都有效
盒可能以不同的方式豎直對齊：以它們的底部或者頂部對齊，或者以它們里面的文本的基線對齊
行盒(line box)包含來自同一行的盒的矩形區域叫做行盒(line box)
line box的寬度由包含塊和float情況決定,一般來說,line box的寬度等于包含塊兩邊之間的寬度,然而float可以插入到包含塊和行盒邊之間,如果有float,那么line box的寬度會比沒有float時小
line box的高度由line-height決定,而line box之間的高度各不相同(比如只含文本的line box高度與包含圖片的line box高度之間)
line box的高度能夠容納它包含的所有盒,當盒的高度小于行盒的高度(例如,如果盒是baseline對齊)時,盒的豎直對齊方式由vertical-align屬性決定
當一行的行內級盒的總寬度小于它們所在的line box的寬度時，它們在行盒里的水平分布由text-align屬性決定。如果該屬性值為justify，用戶代理可能會拉伸行內盒（不包括inline-table和inline-block盒）里的空白和字（間距）
line box與float，vertical-align，text-align
行內盒(inline box)一個inline box是一個（特殊的）行內級盒，其內容參與了它的包含行內格式化上下文
當一個inline box超出一個line box的寬度時，它會被分成幾個盒，并且這些盒會跨多line box分布。如果一個inline-block無法分割（例如，如果該inline box含有一個單個字符，或者特定語言的單詞分隔規則不允許在該inline box里分隔，或如果該inline box受到了一個值為nowrap或者pre的white-space的影響），那么該inline box會從line box溢出
當一個inline box被分割后，margin，border和padding在發生分割的地方（或者在任何分割處，如果有多處的話）不會有可視化效果
同一個line box里的inline box也可能因為雙向（bidirectional）文本處理而被分割成幾個盒
需要盛放（hold）一個行內格式化上下文中的行內級內容時，創建一個line box。不含文本、保留空白符（preserved white space）、margin，padding或者border非0的行內元素、其它流內內容（例如，圖片，inline block或者inline table），并且不以保留換行符（preserved newline）結束的line box必須被當作一個0高度的line box，為了確定它里面所有元素的位置，而其它時候（for any other purpose）必須當它不存在
inline box與斷行，溢出
行高(line-height)如圖,我們就知道了,在CSS中,line-height不是相鄰文本行間上一個baseline與下一文本行baseline之間的距離,而是line box的高度,也就是相鄰文本行間底線的距離
原文鏈接:Deep dive CSS: font metrics, line-height and vertical-align
line-height與可替換元素,非替換元素以及vertical-align
在例1中,決定line box高度的是line-height值,但是實際上是content area以及vertical spacing決定的,line-height=content area+vertical spacing
需要注意的是,content area不等于font-size,只有在simsun(宋體)下,兩者相等
通過上面幾個例子,可以得出以下結論:
計算line box中每個行內級盒的高度時,對于可替換元素,inline-block元素和inline-table元素,這個值就是其margin box的高度;對于inline box,這個值是其line-height
行內級盒是根據其vertical-align屬性豎直對齊的.如果它們是top或者bottom對齊,它們必須對齊得讓line box高度最小化.如果這樣的盒足夠高,存在多個解,而CSS 2.1沒有定義line box基線的位置
line box高度是最高的盒的top與最低的盒的bottom之間的距離
行高的屬性值空行內元素生成空的inline box,這些盒仍然具有margin,padding,border和line height,并因此會影響這些計算,就像有內容的元素一樣
| 值 | 描述 |
|---|---|
| normal | 默認屬性值.跟著用戶的瀏覽器走,且與font-size關聯,一般來說normal值接近于line-height:1.2 |
| number | 根據當前元素的font-size大小計算 |
| length | 使用具體長度值作為行高值 |
| % | 使用百分比值作為行高值,相對于設置了該line-height屬性的元素的font-size大小計算 |
| inherit | 行高繼承.IE8+ |
line-height與百分比值
在百分比行高值中,繼承的不是line-height:150%,而是font-size:16px與line-height:150%的行高值24px;
line-height與number值
在number行高值中,line-height會根據當前元素的font-size大小進行計算,可以實現相應的比例縮放,所以一般建議使用number值
行高的屬性值相關參考
行高與圖片行高與圖片
在例1中,我們知道了圖片是基于baseline對齊的,所以行高影響的是文本的高度,而不是圖片的高度
在例2中,我們放置了單張圖片,在父容器使用text-align:center,圖片受到影響,原因是strut
對于一個內容由內聯級元素組成的塊容器元素，"line-height"指定了元素內行盒的最小高度。這個最小高度包含基線上方的最小高度和下方的最小深度，就像每個行盒以一個具有該元素的字體和行高屬性的0寬內聯盒開始。我們把這種假想盒叫做"strut"（這個名字是受TeX的啟發）
后面的幾個例子是圖片去除縫隙的解決方案,分別是:
圖片display:block
圖片vertical-align:bottom
父元素設置line-height:0 原因是當line-height:0時,行盒的基線會上移
行高的實際應用實現多行文本水平垂直居中
vertical-align該屬性會影響由一個行內級元素生成的盒的行盒內部的豎直定位
默認情況下,inline,inline-block以及table-cell可以應用vertical-align
| 值 | 描述 |
|---|---|
| length | 把該盒提升（正值）或者降低（負值）這個距離。值"0cm"表示與“基線”相同 |
| % | 把該盒提升（正值）或者降低（負值）這個距離（"line-height"值的百分比）。值"0%"表示與“基線”相同 |
| top | inline/inline-block元素:元素頂部和整行的頂部對齊,table-cell元素:單元格頂部padding邊緣和表格行的頂部對齊 |
| bottom | inline/inline-block元素:元素底部和整行的底部對齊, table-cell元素:單元格底部padding邊緣和表格行的底部對齊 |
| baseline | 把盒的基線與父級盒的基線對齊。如果該盒沒有基線，就把bottom margin邊和父級的基線對齊 |
| middle | 把該盒的豎直中點和父級盒的基線加上父級的1/2x-height對齊 |
| text-top | 把該盒的top和父級的內容區（content area）的top對齊 |
| text-bottom | 把該盒的bottom和父級的內容區（content area）的bottom對齊 |
| sub | 把該盒的基線降低到合適的位置作為父級盒的下標（該值不影響該元素文本的字體大小） |
| super | 把該盒的基線提升到合適的位置作為父級盒的上標（該值不影響該元素文本的字體大小） |
在數值/百分比值中,vertical-align可以用負值,而且百分比值提升或降低對應的是line-height值
去除圖片空隙的方法除了上面的幾個之外,還包括:
圖片vertical-align:top,vertical-align:middle
line-height為number時,font-size:0
在table-cell中,高度不足會使用padding填充
vertical-align:middle與垂直居中
這個例子用到的也是父元素font-size:0,圖片垂直中心點會上移,并與容器垂直中心點重合,但是這種方法有缺陷,因為如果后面需要插入問題的時候,不會顯示出來
vertical-align:middle與垂直居中修改版
這里,我們在圖片后面插入了一個空span并且設置為vertical-align:middle,兩者都往下偏移,然后垂直中心點重合
vertical-align:text-bottom與表情圖片文字對齊
例1中,baseline對齊表情會略微高過文字
例2中,bottom對齊容易受到其它行內元素影響,比方說插入一張vertical-align:top的圖片
例3中,middle需要注意圖片的大小,圖片過大,圖片會相對于文字下沉,而且在IE6/7中有兼容性問題
例4中,text-bottom是比較合適的用法,因為它不受行高和其它行內元素影響
vertical-align:text-bottom與baseline
在例1中,圖片下面有個很大的空白區,它的原因是圖片和X與父級的content area底部對齊,而line-height:250px;底部的空白區是X的下邊距
在例2中,圖片和X都vertical-align:top,也就是與父級的content area頂部對齊,這時,圖片后面的普通文本是line-height:250px的文本,圖片下方的空白相當于文本的下邊距
vertical-align與line-height任意數目圖片兩端對齊效果未完成
在上面的例子中,最后一行圖片的的空隙明顯要比圖片默認情況下的空隙大,這是為什么呢,我們先看一個例子
解釋空隙大的例子
在例1中,我們定義了一個空的inline-block盒以及一個帶字符的inline-block盒,第一個盒子的底邊緣和第二個盒子的baseline對齊,也就是說,空inline-block盒子的底邊緣是它的基線
在例2中,我們設置了line-height:0,此時,一個0高度的inline-block有一個有高度的字符,所以它的半間距等于負的字符/2,也就是inline-block會下沉1/2個字符,盒子的上邊緣在字符的中心點上
在CSS標準中是這樣寫的:
"inline-block"（盒）的基線是它的最后一個常規流中的行盒的基線，除非它沒有流內行盒或者它的"overflow"屬性的計算值不為"visible"，此時基線是bottom margin邊
所以,空隙過大的原因是,圖片是baseline對齊的,而line-height:0時,字符X會下沉1/2,這里多出來的空隙是1/2baseline的高度
修復的方法:
父容器line-height:0,最后一個空inline-block插入一個字符,這時空隙就會消失
元素vertical-top
元素vertical-bottom
任意數目圖片兩端對齊效果
需要注意的是,如果空inline-block元素使用vertical-align:bottom時,是元素底部與整個行盒底部對齊,也就是說要保證每個多帶帶的元素都設置vertical-align:bottom
vertical-align與IE6/7在IE6/7下使用vertical-align圖文一體化,圖片上下留白相等,而現代瀏覽器則不一樣
解決辦法:在圖片后面的文字inline-block化
vertical-align實例不固定尺寸圖片或多行文字垂直居中
主體元素inline-block化
添加一個寬度0高度100%的輔助元素
給這兩個元素vertical-align:middle
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111969.html
摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
摘要：塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文塊格式化上下文行內格式化上下文相對定位浮動盒就是一個在當前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規流中全部移除不會影響后面的兄弟。 在可視化格式模型(Visual formatting model)當中,文檔樹中的每個元素根據其盒模型生成0個或多個盒.這些盒的布局由(以下因素)...
摘要：塊級盒參與塊級格式上下文行內級盒參與行級格式上下文。兩個相鄰盒子的垂直間距決定于屬性。水平和在這些盒子中被平分。的寬度由浮動情況和它的包含塊決定。當一個行內盒子被分割，分割發生則和便沒有了視覺效果。參考神奇背后的原理清除浮動與與 BFC與IFC BFC與IFC的參與者 Boxes in the normal flow belong to a formatting context, wh...
摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內容，順序渲染普通文檔流。渲染結果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規則。如果不特殊指定，瀏覽器會默認當前的渲染是按文檔流模式。 CSS視覺格式化模型 瀏覽器在解析渲染我們所寫的html內容，順序渲染（普通文檔流）。 1 2 3 4 ...
摘要：屬于同一個的兩個相鄰的會發生重疊。的區域不會與重疊。計算的高度時，浮動元素也參與計算。給添加，觸發新的，則行內級格式化上下文如何生成由的非替換元素生成。元素會位于與與之間，使得寬度縮短。 block-level box: display屬性為block, list-item, table的元素，會生成block-level box。并且參與block fomatting context...
閱讀 928·2021-11-08 13:22
閱讀 2853·2021-09-29 09:45
閱讀 2831·2021-09-09 11:52
閱讀 2264·2019-08-30 13:20
閱讀 3749·2019-08-29 13:28
閱讀 1366·2019-08-29 12:32
閱讀 2730·2019-08-29 11:10
閱讀 1650·2019-08-26 13:34
