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