盒模型/行內框盒子模型及line-height/vertal-align取值分析

jackwang 發布于2019-08-30 15:52 / 3368人閱讀

摘要：標準盒模型下，設置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據的實際寬為實際高度同理。對齊所處行內框盒子的頂部對齊所處行內框盒子的底部。

盒模型

盒模型之所以稱為“盒”是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現為一個矩形的“盒子”，這個“盒子”包含：內容（content） + 內邊距（padding） + 邊框（border） + 外邊距（padding），如圖：

圖引自"https://developer.mozilla.org..."

盒模型又分為標準盒子模型和IE盒子模型。標準盒模型下，設置box的width的值后，這個值僅包含content的寬高，而在IE盒模型下，這個值是content + padding + border 后的寬高。例：

.test1{
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 10px dotted red;
}

標準盒模型下，test1占據的實際寬為： border-left-width + padding-left + width +
padding-right + border-right-width = 320px; 實際高度同理。

而在IE盒模型下，test1占據的實際寬為 200px; 而content部分的實際寬度為： width -
border-left-width - padding-left - padding-right - border-right-width = 80px; content部分實際高度同理。

IE6+ 的瀏覽器默認采用的均為標準盒模型，隨著ie6-的淘汰，標準/IE盒模型問題已經不再成為問題。

在實際開發過程中，寬度為百分比時常常因為1px的border使得寬度不可控，此時可以使用box-sizing: border-box; 來對特定元素應用IE盒模型，從而使得border和padding值被包含在設置的寬高內。

行內框盒子模型（line-boxes）

對于上文的盒模型的解釋中，加了一個限制是指塊級元素，對于行內元素，在頁面布局結構中，同樣會呈現為一個矩形的盒子，但是這個盒子是無法定義寬度和高度，行內元素的這個盒子我們可以成為行內框盒子，行內框盒子的寬度和高度分別是緊貼著行內元素四周的寬和高。例如：

圖中文字白色區域就是行內框盒子，白色區域的寬和高就是行內框盒子的寬和高，這里設置的文字大小為60px; 7個字，因此行內框盒子的寬高即為 420 X 60 ;

在說到行內框盒子時，通常會提起幾個屬性，line-height和vertal-align。

Line-height

line-height的意義在于指定行內框盒子的高度，對于塊級元素，line-height指定的是塊級元素內部line-boxes的最小高度，對于非替代行內元素，line-height用于計算行內框盒子的高度，對于替代行內元素，line-height多數時間是沒有影響的。
line-height的取值可以為具體值/數字/百分比。

具體值：這個沒有疑問，設置多少就是多少，不過一般不推薦。

數字：實際的line-height的值為當前字體 * 數字，比如font-size: 60px; line-height: 1.5;
等同于line-height: 90px;

百分比：計算方式和數字是一樣的，比如font-size: 60px; line-height: 150%; 等同于line-height:
90px;

line-height具有繼承性，不過數字和百分比的繼承方式是不一樣的，數字是繼承的數字值，然后子元素再拿當前font-size 數字，而百分比是依父元素的font-size 百分比，計算后把結果的帶單位的具體值繼承下去。例：

數字：
   父元素：`.test1{font-size: 20px; line-height: 1.5;}`
   子元素：`.test2{font-size: 60px;}`

父元素實際line-height為 1.5 * 20 px 即30px;
子元素實際line-height之繼承父元素計算前的值，1.5，因此子元素實際line-height為 1.5 * 60 px 即90px;

百分比：
    父元素：`.test1{font-size: 20px; line-height: 150%;}`
    子元素：`.test2{font-size: 60px;}`

父元素實際line-height為 150% * 20 px 即30px;
子元素實際line-height直接繼承父元素計算后的結果，即30px;
瀏覽器默認的line-height值為normal，W3C解釋為設置合理的行間距；MDN解釋為取決于用戶代理和元素的font-family，一般通常默認為1.2左右。在上圖的例子中，在chrome下采用的是楷體，line-height測算為1.14。在最上面的圖中，我們未設置line-height的值，但是可以看得到文字上邊緣后是有一條縫隙的，這就是所謂的合理的行間距的結果。
然而，實際上，行內框盒子模型的高度和line-height沒有關系，并且在上圖中我們也可以發現，行內框盒子在布局中占據的高度實際上是有line-height決定的，當line-height為0時，這個行框盒子就不再占用頁面布局的位置了，除了層級關系的相互遮蓋，這個行內框盒子就不會影響其他元素的布局了，事實是這樣的嗎。例：

事實上我們發現，紅色的test2，上邊緣的其實位置并不是父級(0,0)的位置，也就是說，我們的行框盒子實際還是占據了一部分位置，這個其實和vertal-align有關的。

Tips：
   替代行內元素指的是值根據元素的不同屬性來決定元素的具體顯示內容，比如input type="text/button/file"等，其他的如：object/video/textarea/img等，某些情況下canvas和audio也可能是替換元素。

Vertal-align

vertal-align是用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。vertal-align的取值有主要有：baseline/top/middle/bottom/sub/super/text-top/text-bottom/百分比/具體值。先來了解一下各個值對應的位置。

baseline: 默認值，自身的baseline和父級盒子的baseline對齊，如果沒有自身baseline（比如img），則外邊距底部邊緣和父級的baseline對齊；

middle: 自身垂直中點對齊父級baseline + x 高度的一半的位置；

百分比: 在baseline的基礎上，向上（百分比為正）或者向下（百分比為負）偏移 line-height * 百分比的值；

具體值：在baseline的基礎上，向上（值為正）或者向下（值為負）偏移這個值的距離；

top和bottom是兩個比較特殊的取值，使元素與行框盒子的邊界對齊而不是參考基線。

top: 對齊所處行內框盒子的頂部；

bottom: 對齊所處行內框盒子的底部。

GPU云服務器云服務器盒模型盒子模型盒模型html嗎簡述html盒模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116455.html

盒模型/行內框盒子模型及line-height/vertal-align取值分析

摘要：標準盒模型下，設置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據的實際寬為實際高度同理。對齊所處行內框盒子的頂部對齊所處行內框盒子的底部。盒模型盒模型之所以稱為盒是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現為一個矩形的盒子，這個盒子包含：內容（content） + 內邊距（padding） + 邊框（border） + 外邊距（p...

MAX_zuo 2019-08-01 16:16 評論0 收藏0
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
扯點：Box Modal - 盒模型

摘要：在文檔中，元素被表示為一個矩形的盒子。在中，使用盒模型描述這些矩形盒子中的每一個。規定以具體單位計的內邊距值，比如像素厘米等。但不允許使用負值。實際測試的百分比，測試結果并不是等于，而是近似等于。在文檔中，元素被表示為一個矩形的盒子。在CSS中，使用盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊(margin), 邊框邊(border...

Tony 2019-08-29 12:17 評論0 收藏0
想要清晰的明白（二）CSS 盒模型Block box與Line box

摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰外邊距合并，解決這個的方式見想要清晰的明白一中的部分。參考資料權威指南第三版為負值產生的影響和常見布局應用布局圣杯布局雙飛翼布局深入理解和的基友關系深入理解中的行高在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細的介紹兩種盒子的具體細節 Block Box show...

Vicky 2019-08-30 13:03 評論0 收藏0
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。視覺格式化模型頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將...

Edison 2019-08-30 13:00 評論0 收藏0