資訊專欄INFORMATION COLUMN
摘要：盒模型的簡介本文簡單的總結(jié)了一些基本概念，知識點以及細(xì)節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。
1. 盒模型的簡介 本文簡單的總結(jié)了一些基本概念，知識點以及細(xì)節(jié)問題
作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。
在我們編寫HTML時，網(wǎng)頁上的內(nèi)容幾乎都是被包在一個個元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div、span、a、img等等。雖然標(biāo)簽的個數(shù)很多樣，但是總的來說可以把元素分為三種
塊狀(block)元素
行內(nèi)(inline)元素
行內(nèi)塊(inline-block)元素
在具體講總結(jié)盒模型前，先簡單的介紹一下這幾種元素各自的特性。
在CSS中我們經(jīng)常聽到的一個詞叫做“文檔流”，那么到底什么是文檔流呢？“流”實際上就是CSS中的一種基本的定位和布局機制。上述所說的三種元素當(dāng)然要遵守一定的布局機制啦，具體來說：
塊狀元素： 典型代表div
在默認(rèn)情況下寬度會自動鋪滿于父元素，也就是一個塊級元素會獨占一行，而且它后面的元素會另起一行顯示。
寬(width)、高(height)、內(nèi)邊距(padding)、外邊距(margin)是可以進(jìn)行具體設(shè)置的
行內(nèi)元素： 典型代表span
行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會依次排列，不足則換行。
寬高是無法指定的，其大小是由里面的內(nèi)容撐開決定。
雖然寬高無法指定，但是水平方向上的內(nèi)邊距(padding)、外邊距(margin)是可以進(jìn)行設(shè)置的。
當(dāng)對一個文檔進(jìn)行布局的時候，瀏覽器渲染引擎會根據(jù)CSS-Box模型將所有元素表示為一個矩形盒子，在CSS中會通過盒模型去描述這些矩形盒子————元素所占空間的內(nèi)容。
那么盒子里到底有什么呢，如下圖所示：
對于一個盒子來說它由四個部分組成：其中margin叫做外邊距，border叫做邊框，padding叫做內(nèi)邊距，content叫做內(nèi)容區(qū)域
細(xì)分一點,margin它可以分為margin-left,margin-right,margin-top和margin-bottom。同理border和padding也有這樣的屬性。
盒子出來了，自然要計算它的大小，但是但是，又有幺蛾子了，在計算大小的時候有兩套不同的標(biāo)準(zhǔn)，
也就是有兩種盒模型：
第一種是W3C的標(biāo)準(zhǔn)模型
第二種是IE的怪異盒模型
自然不同的盒子模型會有不同的計算方式
2. 尺寸計算在W3C標(biāo)準(zhǔn)模式下：一個盒子的空間占有寬度=content width + padding + border + margin
在IE怪異盒模型：一個盒子的空間占有寬度=width(padding和border被包含在內(nèi)了) + margin
高度可以同理計算
由于存在以上的計算方法：
在CSS的標(biāo)準(zhǔn)盒模型中，width和height指的是內(nèi)容區(qū)域的寬度和高度。
增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加整個盒子的大小。這個特點其實有的時候有點討厭的————我們可以通過設(shè)置box-sizing(CSS3新增屬性)來改變盒子被撐大。
那么box-sizing到底是什么呢？在MDN中有這樣的解釋說明：
該屬性用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒子模型?？梢允褂么藢傩詠砟M不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。
在標(biāo)準(zhǔn)盒模型中，你設(shè)置一個元素的 width 與 height 只會應(yīng)用到這個元素的內(nèi)容區(qū)。如果這個元素有border或padding，當(dāng)我們在調(diào)整一個元素的寬度或高度時需要時刻注意這個元素的邊框和內(nèi)邊距，也就上面講的會被撐大。當(dāng)我們在實現(xiàn)響應(yīng)式布局時候，這個特點尤為煩人。
box-sizing屬性的默認(rèn)值為content-box，也就是標(biāo)準(zhǔn)盒模型。
box-sizing另外一個屬性值border-box指的就是IE盒模型。
了解盒模型的計算方式是非常重要的，現(xiàn)在的網(wǎng)頁，尤其是移動端的頁面，需要適應(yīng)于不同的屏幕大小~~~
此外，如果在ie6,7,8中DOCTYPE缺失也會觸發(fā)IE模式。
參考文獻(xiàn)：
1.張鑫旭-鑫空間-鑫生活
2.MDN-web技術(shù)文檔
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113759.html
摘要：判斷步驟如下如果有一個操作數(shù)是布爾值，則在比較相等性之前先將其轉(zhuǎn)換為數(shù)值轉(zhuǎn)換為，而轉(zhuǎn)換為。實際上是對比運用上面的順序，是布爾值，所以轉(zhuǎn)化為數(shù)值為。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我的個人博客 類似標(biāo)題中的問題還有很多，例如： 為...
摘要：前端碎碎念系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。當(dāng)兩個操作數(shù)都是數(shù)值時，執(zhí)行常規(guī)的數(shù)值加法計算。關(guān)鍵還是要加深對中對數(shù)值轉(zhuǎn)換的理解，以不變應(yīng)萬變。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題...
摘要：使用命名空間的目的是對標(biāo)識符的名稱進(jìn)行本地化，以避免命名沖突或名字污染，關(guān)鍵字的出現(xiàn)就是針對這種問題的。缺省參數(shù)概念缺省參數(shù)是聲明或定義函數(shù)時為函數(shù)的參數(shù)指定一個默認(rèn)值。 ...
摘要：在美國和一些其他發(fā)達(dá)國家，程序員已經(jīng)從一個相對高端的行業(yè)變成越來越多普通人的日常。是五十個編輯推薦話題之一軟件開發(fā)者是美國四個州最常見的職業(yè)圖片來源我們不難設(shè)想，把軟件開發(fā)的工作自動化掉，對相關(guān)企業(yè)來說將會是一個多么巨大的誘惑。 在美國和一些其他發(fā)達(dá)國家，程序員已經(jīng)從一個相對高端的行業(yè)變成越來越多普通人的日常。 JavaScript 是 Medium 五十個編輯推薦話題之一: http...
摘要：更多文章請前往我的個人博客這個問題是有關(guān)執(zhí)行順序和的。其中，整體代碼，可以理解為待執(zhí)行的所有代碼。當(dāng)隊列執(zhí)行完后再執(zhí)行一個任務(wù)。然后再次回到新的事件循環(huán)。所以兩個執(zhí)行完后隊列里只剩下第一個里的。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我...
閱讀 1260·2021-11-23 10:04
閱讀 2498·2021-11-22 15:29
閱讀 3564·2021-11-19 09:40
閱讀 873·2021-09-22 15:26
閱讀 2219·2019-08-29 16:27
閱讀 2586·2019-08-29 16:10
閱讀 1997·2019-08-29 15:43
閱讀 3405·2019-08-29 12:43
