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