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