【快速入門系列】CSS盒模型基礎

引言

CSS盒模型是頁面佈局中常常會使用到的一種思惟模型，將margin、border、padding、content等概念運用平常生活中的盒子來形容，所以稱之爲「盒模型」。

1、什麼是盒模型

咱們首先來看一下在HTML中盒模型的樣子：

咱們能夠清楚的看出，盒模型由content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）組成。

2、W3C標準盒模型

IE8以上瀏覽器默認使用W3C標準盒模型
在W3C標準下，咱們定義元素的width值即爲盒模型中的content的寬度值，height值即爲盒模型中的content的高度值，所以有：
元素佔據的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素佔據的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
這裏給你們舉個栗子：

<style>
.box {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 5px solid grey;
  margin: 20px;
  background: red;
}
</style>

<div class="box">
  盒模型內部元素
</div>

最終呈現的效果以下圖：

W3C盒模型各部分取值：

3、IE盒模型

IE8及如下的瀏覽器默認使用IE盒模型
IE盒模型又稱「怪異盒模型」，在該標準下，咱們定義元素的width值爲盒模型中的border-left + padding-left + content的寬度值 + padding-right + border-right的總和，height值爲盒模型中的border-top + padding-top + content的高度值 + padding-bottom + border-bottom的總和
元素佔據的寬度 = margin-left + width + margin-right
元素佔據的高度 = margin-top + height + margin-bottom
上述一樣的代碼，在IE盒模型下會有以下效果：

4、box-sizing

如下是MDN對 box-sizing 屬性的說明：

box-sizing 屬性能夠被用來調整這些表現:
content-box 是默認值。若是你設置一個元素的寬爲100px，那麼這個元素的內容區會有100px寬，而且任何邊框和內邊距的寬度都會被增長到最後繪製出來的元素寬度中。
border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，若是你將一個元素的width設爲100px,那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數狀況下這使得咱們更容易的去設定一個元素的寬高。

咱們能夠簡單的理解，當box-sizing爲content-box時，咱們使用的是W3C盒模型，當box-sizing爲border-box時，咱們使用的是IE盒模型。

更多關於box-sizing屬性的使用，能夠看這裏：box-sizing | MDN

結束語

盒模型概念不管是在實戰中或者面試中都是很是重要且基礎的知識點，所以須要熟練掌握，此文章對盒模型概念作了基本介紹，但願能給你帶來幫助。