成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

盒模型/行內(nèi)框盒子模型及l(fā)ine-height/vertal-align取值分析

MAX_zuo / 3674人閱讀

摘要：標(biāo)準(zhǔn)盒模型下，設(shè)置的的值后，這個(gè)值僅包含的寬高，而在盒模型下，這個(gè)值是后的寬高。例標(biāo)準(zhǔn)盒模型下，占據(jù)的實(shí)際寬為實(shí)際高度同理。對(duì)齊所處行內(nèi)框盒子的頂部對(duì)齊所處行內(nèi)框盒子的底部。

盒模型

盒模型之所以稱為“盒”是因?yàn)樵谝粋€(gè)頁(yè)面布局中，文檔中的每一個(gè)元素（塊級(jí)元素）均呈現(xiàn)為一個(gè)矩形的“盒子”，這個(gè)“盒子”包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（padding），如圖：

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

盒模型又分為標(biāo)準(zhǔn)盒子模型和IE盒子模型。標(biāo)準(zhǔn)盒模型下，設(shè)置box的width的值后，這個(gè)值僅包含content的寬高，而在IE盒模型下，這個(gè)值是content + padding + border 后的寬高。例：

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

標(biāo)準(zhǔn)盒模型下，test1占據(jù)的實(shí)際寬為： border-left-width + padding-left + width +
padding-right + border-right-width = 320px; 實(shí)際高度同理。

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

IE6+ 的瀏覽器默認(rèn)采用的均為標(biāo)準(zhǔn)盒模型，隨著ie6-的淘汰，標(biāo)準(zhǔn)/IE盒模型問題已經(jīng)不再成為問題。

在實(shí)際開發(fā)過程中，寬度為百分比時(shí)常常因?yàn)?px的border使得寬度不可控，此時(shí)可以使用box-sizing: border-box; 來對(duì)特定元素應(yīng)用IE盒模型，從而使得border和padding值被包含在設(shè)置的寬高內(nèi)。

行內(nèi)框盒子模型（line-boxes）

對(duì)于上文的盒模型的解釋中，加了一個(gè)限制是指塊級(jí)元素，對(duì)于行內(nèi)元素，在頁(yè)面布局結(jié)構(gòu)中，同樣會(huì)呈現(xiàn)為一個(gè)矩形的盒子，但是這個(gè)盒子是無法定義寬度和高度，行內(nèi)元素的這個(gè)盒子我們可以成為行內(nèi)框盒子，行內(nèi)框盒子的寬度和高度分別是緊貼著行內(nèi)元素四周的寬和高。例如：

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

在說到行內(nèi)框盒子時(shí)，通常會(huì)提起幾個(gè)屬性，line-height和vertal-align。

Line-height

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

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

數(shù)字：實(shí)際的line-height的值為 當(dāng)前字體 * 數(shù)字 ，比如font-size: 60px; line-height: 1.5;
等同于line-height: 90px;

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

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

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

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

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

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

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

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

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

baseline: 默認(rèn)值，自身的baseline和父級(jí)盒子的baseline對(duì)齊，如果沒有自身baseline（比如img），則外邊距底部邊緣和父級(jí)的baseline對(duì)齊；

middle: 自身垂直中點(diǎn)對(duì)齊 父級(jí)baseline + x 高度的一半 的位置；

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

具體值：在baseline的基礎(chǔ)上，向上（值為正）或者向下（值為負(fù)）偏移 這個(gè)值的距離；

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

top: 對(duì)齊所處行內(nèi)框盒子的頂部；

bottom: 對(duì)齊所處行內(nèi)框盒子的底部。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/50408.html

相關(guān)文章

  • 盒模型/行內(nèi)框盒子模型及line-height/vertal-align取值分析

    摘要：標(biāo)準(zhǔn)盒模型下，設(shè)置的的值后，這個(gè)值僅包含的寬高，而在盒模型下，這個(gè)值是后的寬高。例標(biāo)準(zhǔn)盒模型下，占據(jù)的實(shí)際寬為實(shí)際高度同理。對(duì)齊所處行內(nèi)框盒子的頂部對(duì)齊所處行內(nèi)框盒子的底部。 盒模型 盒模型之所以稱為盒是因?yàn)樵谝粋€(gè)頁(yè)面布局中，文檔中的每一個(gè)元素（塊級(jí)元素）均呈現(xiàn)為一個(gè)矩形的盒子，這個(gè)盒子包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（p...

    jackwang 評(píng)論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(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...

    miracledan 評(píng)論0 收藏0

  • 扯點(diǎn)：Box Modal - 盒模型

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

    Tony 評(píng)論0 收藏0

  • 想要清晰的明白（二）CSS 盒模型Block box與Line box

    摘要：垂直格式化，有一個(gè)很重要的方面是會(huì)造成垂直相鄰?fù)膺吘嗪喜?，解決這個(gè)的方式見想要清晰的明白一中的部分。參考資料權(quán)威指南第三版為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用布局圣杯布局雙飛翼布局深入理解和的基友關(guān)系深入理解中的行高 在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細(xì)的介紹兩種盒子的具體細(xì)節(jié) Block Box show...

    Vicky 評(píng)論0 收藏0

  • 想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

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

    Edison 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<