深刻理解CSS系列（一）：理解CSS的盒子模型

接觸前端也有好幾個年頭了，可是，講實話，對於CSS的理解真的是不敢恭維，相信不少同行也有相似的感覺吧！這是爲何呢？由於咱們都認爲CSS太簡單了，沒有必要深刻學習，果然如此？其實，只不過是本身圖樣圖森破罷了。若是真的那麼簡單，爲何常常會遇到一些奇怪的樣式問題，而要折騰好長時間呢？就是由於無從下手，終究仍是基礎不紮實啊！最近打算深刻的學習一下CSS，以便遇到問題時，才知道如何下手，從而迅速的對症下藥。「深刻理解」只是相對於我我的而言的哈，若是有大神以爲不夠深刻，請不喜勿噴。這是深刻理解CSS的第一篇，主要介紹CSS的盒子模型。

什麼是盒子模型

提及盒子模型，做爲前端開發的咱們，相信你們都有了解過的 。這裏套用mdn官網的解釋：

在一個文檔中，每一個元素都被表示爲一個矩形的盒子。肯定這些盒子的尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和位置是渲染引擎的目標。
在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。

官方語言老是那麼的晦澀難懂，那我接用chrome的控制檯的截圖來講明吧：

最外面橙色的就是外邊距區域(margin area )，往裏黃色的是邊框區域(border area)，再往裏的綠色的是內邊距區域(padding area )，最裏面綠色的就是內容區域（content area）了。

盒子模型的做用

好吧，盒子模型的概念好像沒有什麼好說的，就上面那張圖片罷了。下面一塊兒來看看盒子模型對咱們佈局有什麼影響。舉個栗子，假如想設置一個元素的大小爲200px，若是寫了以下的代碼：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

結果，你在審查元素時，發現這個元素的大小變成了240px，而不是200px了。

這是爲何呢？由於默認狀況下，設置width 、height 等做用對象是內容區域，因此設置的width: 200px僅僅是內容區域的寬度，加上左右內邊距大小，致使了元素的總體尺寸變大了。這和咱們對現實世界的中盒子的認識有差別的。好比，你咱們說房子的面積，並不僅僅指可用面積，還要包括牆壁厚度、陽臺、電梯之類的空間的。

盒子模型和box-sizing

爲了把CSS和現實世界對應起來，這時候box-sizing就要用上場了。box-sizing是用來設置width、height的做用對象的。有三個值，分別是content-box 、 paading-box 、 border-box， 默認值是content-box。可能有人會問，爲何沒有margin-box啊？具體緣由就不知道了，能夠參考張鑫旭老師在《CSS世界》一書中提到了兩個緣由：

margin-box 自己沒有多大的價值
和 margin 的規範會衝突。由於margin規範寫着「 margin的背景永遠是透明的 」，若是來個margin-box，那background怎麼辦？

至於爲何沒有margin-box就簡單的提一下，有興趣的朋友能夠本身去查一下。

最佳實踐

爲了佈局上的方便，一些專家建議咱們將全部的元素都設置爲box-sizing: border-box，具體緣由能夠參考這篇文章: International box-sizing Awareness Day

若是不考慮低版本瀏覽器的話，能夠用下面的代碼：

*,
*:before,
*:after { 
  box-sizing: border-box;
}

後來,又有專家建議用的繼承的方法，以下：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

這種方法被稱爲最佳實踐，具體緣由就不說了，參考這裏：Inheriting box-sizing Probably Slightly Better Best-Practice

既然是專家推薦 ，那咱們之後能夠把第二種方法的段代碼放到reset.css裏面的。

好吧，先寫這麼多了，過久沒有擼字，感受寫一個字也很痛苦呀。
這是深刻理解CSS的第一篇，講真，我本身也認可寫得一點也不深刻，這也不能怪我呢，由於過久沒有寫過博文，真的很難靜心來好好寫，那就以個簡單的知識點做爲開頭吧。

有問題的歡迎在討論區交流哈~