成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

盒模型的一些碎碎念

王偉廷 / 2128人閱讀

摘要：盒模型的簡(jiǎn)介本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問(wèn)題作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。

1. 盒模型的簡(jiǎn)介 本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問(wèn)題

作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。

在我們編寫(xiě)HTML時(shí)，網(wǎng)頁(yè)上的內(nèi)容幾乎都是被包在一個(gè)個(gè)元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見(jiàn)的有div、span、a、img等等。雖然標(biāo)簽的個(gè)數(shù)很多樣，但是總的來(lái)說(shuō)可以把元素分為三種

塊狀(block)元素

行內(nèi)(inline)元素

行內(nèi)塊(inline-block)元素

在具體講總結(jié)盒模型前，先簡(jiǎn)單的介紹一下這幾種元素各自的特性。

在CSS中我們經(jīng)常聽(tīng)到的一個(gè)詞叫做“文檔流”，那么到底什么是文檔流呢？“流”實(shí)際上就是CSS中的一種基本的定位和布局機(jī)制。上述所說(shuō)的三種元素當(dāng)然要遵守一定的布局機(jī)制啦，具體來(lái)說(shuō)：

塊狀元素： 典型代表div

在默認(rèn)情況下寬度會(huì)自動(dòng)鋪滿于父元素，也就是一個(gè)塊級(jí)元素會(huì)獨(dú)占一行，而且它后面的元素會(huì)另起一行顯示。

寬(width)、高(height)、內(nèi)邊距(padding)、外邊距(margin)是可以進(jìn)行具體設(shè)置的

行內(nèi)元素： 典型代表span

行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)依次排列，不足則換行。

寬高是無(wú)法指定的，其大小是由里面的內(nèi)容撐開(kāi)決定。

雖然寬高無(wú)法指定，但是水平方向上的內(nèi)邊距(padding)、外邊距(margin)是可以進(jìn)行設(shè)置的。

當(dāng)對(duì)一個(gè)文檔進(jìn)行布局的時(shí)候，瀏覽器渲染引擎會(huì)根據(jù)CSS-Box模型將所有元素表示為一個(gè)矩形盒子，在CSS中會(huì)通過(guò)盒模型去描述這些矩形盒子————元素所占空間的內(nèi)容。

那么盒子里到底有什么呢，如下圖所示：

對(duì)于一個(gè)盒子來(lái)說(shuō)它由四個(gè)部分組成：其中margin叫做外邊距，border叫做邊框，padding叫做內(nèi)邊距，content叫做內(nèi)容區(qū)域

細(xì)分一點(diǎn),margin它可以分為margin-left,margin-right,margin-top和margin-bottom。同理border和padding也有這樣的屬性。

盒子出來(lái)了，自然要計(jì)算它的大小，但是但是，又有幺蛾子了，在計(jì)算大小的時(shí)候有兩套不同的標(biāo)準(zhǔn)，
也就是有兩種盒模型：

第一種是W3C的標(biāo)準(zhǔn)模型

第二種是IE的怪異盒模型

自然不同的盒子模型會(huì)有不同的計(jì)算方式

2. 尺寸計(jì)算

在W3C標(biāo)準(zhǔn)模式下：一個(gè)盒子的空間占有寬度=content width + padding + border + margin

在IE怪異盒模型：一個(gè)盒子的空間占有寬度=width(padding和border被包含在內(nèi)了) + margin

高度可以同理計(jì)算

由于存在以上的計(jì)算方法：

在CSS的標(biāo)準(zhǔn)盒模型中，width和height指的是內(nèi)容區(qū)域的寬度和高度。
增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加整個(gè)盒子的大小。這個(gè)特點(diǎn)其實(shí)有的時(shí)候有點(diǎn)討厭的————我們可以通過(guò)設(shè)置box-sizing(CSS3新增屬性)來(lái)改變盒子被撐大。

3. box-sizing(在IE8+瀏覽器中)

那么box-sizing到底是什么呢？在MDN中有這樣的解釋說(shuō)明：

該屬性用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型?？梢允褂么藢傩詠?lái)模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。

在標(biāo)準(zhǔn)盒模型中，你設(shè)置一個(gè)元素的 width 與 height 只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有border或padding，當(dāng)我們?cè)谡{(diào)整一個(gè)元素的寬度或高度時(shí)需要時(shí)刻注意這個(gè)元素的邊框和內(nèi)邊距，也就上面講的會(huì)被撐大。當(dāng)我們?cè)趯?shí)現(xiàn)響應(yīng)式布局時(shí)候，這個(gè)特點(diǎn)尤為煩人。

box-sizing屬性的默認(rèn)值為content-box，也就是標(biāo)準(zhǔn)盒模型。

box-sizing另外一個(gè)屬性值border-box指的就是IE盒模型。

了解盒模型的計(jì)算方式是非常重要的，現(xiàn)在的網(wǎng)頁(yè)，尤其是移動(dòng)端的頁(yè)面，需要適應(yīng)于不同的屏幕大小~~~

此外，如果在ie6,7,8中DOCTYPE缺失也會(huì)觸發(fā)IE模式。

參考文獻(xiàn)：

1.張?chǎng)涡?鑫空間-鑫生活

2.MDN-web技術(shù)文檔

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113759.html

相關(guān)文章

  • 前端碎碎念 之 為什么[] == ![] ?

    摘要：判斷步驟如下如果有一個(gè)操作數(shù)是布爾值，則在比較相等性之前先將其轉(zhuǎn)換為數(shù)值轉(zhuǎn)換為，而轉(zhuǎn)換為。實(shí)際上是對(duì)比運(yùn)用上面的順序，是布爾值，所以轉(zhuǎn)化為數(shù)值為。 『前端碎碎念』系列會(huì)記錄我平時(shí)看書(shū)或者看文章遇到的問(wèn)題，一般都是比較基礎(chǔ)但是容易遺忘的知識(shí)點(diǎn)，你也可能會(huì)在面試中碰到。 我會(huì)查閱一些資料并可能加上自己的理解，來(lái)記錄這些問(wèn)題。更多文章請(qǐng)前往我的個(gè)人博客 類(lèi)似標(biāo)題中的問(wèn)題還有很多，例如： 為...

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

  • 前端碎碎念 之 [] + {} 和 {} + []一樣嗎？

    摘要：前端碎碎念系列會(huì)記錄我平時(shí)看書(shū)或者看文章遇到的問(wèn)題，一般都是比較基礎(chǔ)但是容易遺忘的知識(shí)點(diǎn)，你也可能會(huì)在面試中碰到。當(dāng)兩個(gè)操作數(shù)都是數(shù)值時(shí)，執(zhí)行常規(guī)的數(shù)值加法計(jì)算。關(guān)鍵還是要加深對(duì)中對(duì)數(shù)值轉(zhuǎn)換的理解，以不變應(yīng)萬(wàn)變。 『前端碎碎念』系列會(huì)記錄我平時(shí)看書(shū)或者看文章遇到的問(wèn)題，一般都是比較基礎(chǔ)但是容易遺忘的知識(shí)點(diǎn)，你也可能會(huì)在面試中碰到。 我會(huì)查閱一些資料并可能加上自己的理解，來(lái)記錄這些問(wèn)題...

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

  • 關(guān)于C++基礎(chǔ)的一些“碎碎念”

    摘要：使用命名空間的目的是對(duì)標(biāo)識(shí)符的名稱(chēng)進(jìn)行本地化，以避免命名沖突或名字污染，關(guān)鍵字的出現(xiàn)就是針對(duì)這種問(wèn)題的。缺省參數(shù)概念缺省參數(shù)是聲明或定義函數(shù)時(shí)為函數(shù)的參數(shù)指定一個(gè)默認(rèn)值。 ...

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

  • 無(wú)關(guān)緊要的碎碎念

    摘要：在美國(guó)和一些其他發(fā)達(dá)國(guó)家，程序員已經(jīng)從一個(gè)相對(duì)高端的行業(yè)變成越來(lái)越多普通人的日常。是五十個(gè)編輯推薦話題之一軟件開(kāi)發(fā)者是美國(guó)四個(gè)州最常見(jiàn)的職業(yè)圖片來(lái)源我們不難設(shè)想，把軟件開(kāi)發(fā)的工作自動(dòng)化掉，對(duì)相關(guān)企業(yè)來(lái)說(shuō)將會(huì)是一個(gè)多么巨大的誘惑。 在美國(guó)和一些其他發(fā)達(dá)國(guó)家，程序員已經(jīng)從一個(gè)相對(duì)高端的行業(yè)變成越來(lái)越多普通人的日常。 JavaScript 是 Medium 五十個(gè)編輯推薦話題之一: http...

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

  • 前端碎碎念 之 nextTick, setTimeout 以及 setImmediate 三者的執(zhí)行

    摘要：更多文章請(qǐng)前往我的個(gè)人博客這個(gè)問(wèn)題是有關(guān)執(zhí)行順序和的。其中，整體代碼，可以理解為待執(zhí)行的所有代碼。當(dāng)隊(duì)列執(zhí)行完后再執(zhí)行一個(gè)任務(wù)。然后再次回到新的事件循環(huán)。所以兩個(gè)執(zhí)行完后隊(duì)列里只剩下第一個(gè)里的。 『前端碎碎念』系列會(huì)記錄我平時(shí)看書(shū)或者看文章遇到的問(wèn)題，一般都是比較基礎(chǔ)但是容易遺忘的知識(shí)點(diǎn)，你也可能會(huì)在面試中碰到。 我會(huì)查閱一些資料并可能加上自己的理解，來(lái)記錄這些問(wèn)題。更多文章請(qǐng)前往我...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<