深刻理解Div和CSS的佈局layout盒模型Box Model

熟練掌握Div和CSS的佈局(layout)方法，首先要對盒模型(Box Model)有足夠的瞭解。盒子模型是CSS佈局網頁時很是重要的概念，只有很好地掌握了盒子模型以及其中每一個元素的使用方法，才能熟練使用css的定位方法和技巧。

什麼是盒子模型(Box Model)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

每一個盒子由四個部分(或稱區域)組成，其效用由它們各自的邊界(Edge)所定義。如圖，與盒子的四個組成區域相對應，每一個盒子有四個邊界：內容邊界 Content edge、內邊距邊界 Padding Edge、邊框邊界 Border Edge、外邊框邊界 Margin Edge。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

不一樣部分的說明：

內容區域 content area ，由內容邊界限制，容納着元素的「真實」內容，例如文本、圖像或是一個視頻播放器。它的尺寸爲內容寬度（或稱 content-box 寬度）和內容高度（或稱 content-box 高度）。它一般含有一個背景顏色（默認顏色爲透明）或背景圖像。

若是 box-sizing 爲 content-box（默認），則內容區域的大小可明確地經過 width、min-width、max-width、height、min-height，和 max-height 控制。

內邊距區域 padding area 由內邊距邊界限制，擴展自內容區域，負責延伸內容區域的背景，填充元素中內容與邊框的間距。它的尺寸是 padding-box 寬度 和 padding-box 高度。

內邊距的粗細能夠由 padding-top、padding-right、padding-bottom、padding-left，和簡寫屬性 padding 控制。

邊框區域 border area 由邊框邊界限制，擴展自內邊距區域，是容納邊框的區域。其尺寸爲 border-box 寬度 和 border-box 高度。

邊框的粗細由 border-width 和簡寫的 border 屬性控制。若是 box-sizing 屬性被設爲 border-box，那麼邊框區域的大小可明確地經過 width、min-width, max-width、height、min-height，和 max-height 屬性控制。假如框盒上設有背景（background-color 或 background-image），背景將會一直延伸至邊框的外沿（默認爲在邊框下層延伸，邊框會蓋在背景上）。此默認表現可經過 CSS 屬性 background-clip 來改變。

外邊距區域 margin area 由外邊距邊界限制，用空白區域擴展邊框區域，以分開相鄰的元素。它的尺寸爲 margin-box 寬度 和 margin-box 高度。

外邊距區域的大小由 margin-top、margin-right、margin-bottom、margin-left，和簡寫屬性 margin 控制。在發生外邊距合併的狀況下，因爲盒之間共享外邊距，外邊距不容易弄清楚。

標準盒模型

• 在標準模式下，一個塊的總寬度 = 內容的width + padding(左右) + border(左右) + margin(左右)

怪異盒子模型（IE盒子模型）

• 在怪異模式下，一個塊的總寬度 = 內容的width + margin(左右)（這裏的width包含了padding(左右)和border(左右)的值）

如何運用和選擇哪一種盒模型

大多數瀏覽器採用W3C標準模型，而IE中則採用Microsoft本身的標準。 在HTML文檔頭部定義doctype，即便用標準盒模型。當不對doctype進行定義時，會觸發怪異模式。

那麼應該選哪一種盒子模型呢？

通常狀況下應該遵循W3C標準使用標準盒模型，不少ui框架使用的都是怪異盒模型，好比ionic、vux和bootstrap。

當作一個自適應佈局的時候，分別建立兩個div，使用flex佈局，別設定寬度左20%和右80%，沒毛病。 可是新需求是右側的div須要加padding-left:20px;border-left:1px solid #000，這個時候就尷尬了，右側寬度會超出容器，逼迫左側寬度壓縮，寬度就不是左20%和右80%了。

而用怪異盒模型，就不會出現這樣的問題。

/*標準盒模型：一個塊的總寬度 = 內容的width + padding(左右) + border(左右) + margin(左右)*/
  BoxModel = content width + padding + border + margin
  
  /*怪異盒模型：一個塊的總寬度 = 內容的width + margin(左右)（這裏的width包含了padding(左右)和border(左右)的值）*/
  BoxModel = content width + margin

複製代碼

提示：在盒模型中，外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。另外 除可替換元素外，對於行內元素來講，儘管內容周圍存在內邊距與邊框，但其佔用空間（每一行文字的高度）則由 line-height 屬性決定，即便邊框和內邊距仍會顯示在內容周圍。

小編推薦：程序員導航

做爲一名碼農，隨着平時工做的須要，這裏收集了國內外不少優秀網站，這其中包括在線工具、在線運行、免費接口、在線資源、在線學習、技術論壇、技術博客等等，知足通常程序員平常需求。