讓CSS佈局更加直觀：box-sizing

讓CSS佈局更加直觀：box-sizing

　　若是你寫過CSS或者你接觸過CSS，相信你必定對盒子模型一點都不陌生。CSS其中一個讓人比較困惑的地方就在於它的盒子模型中關於高度和寬度的計算，別說那些初學者了，就是寫過好久CSS的人也同樣會有如此的感受。CSS中的高度和寬度老是不那麼直觀，讓你老是很困惑，不能一眼就能分辨出其高度和寬度。有的時候你但願它的寬度是100px，但實際狀況卻總不是這樣。然而，設置正確的box-sizing的屬性，盒子的高度和寬度會的確就是你設置的100px。是否有點暈了呢，好了，下面我詳細介紹下。

　　一、盒子模型

---

　　關於CSS重要的一個概念就是CSS盒子模型。它控制着頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤爲當涉及到高度和寬度計算的時候。真正盒子的寬度（在頁面呈現出來的寬度）和高度，須要加上一些其它的屬性，例如：

　　padding + border + width = 盒子的寬度
　　padding + border + height = 盒子的高度

　　這看起來並非那麼直觀，那麼咱們看一個圖：

　　這意味着，若是咱們設置一個寬度爲200px，而實際呈現的盒子的寬度可能會大於200px（除非沒有左右邊框和左右補白）。這可能看起來比較怪，CSS設置的寬度僅僅是內容區的寬度，而非盒子的寬度。一樣，高度相似。

　　這致使的直接結果是當咱們但願頁面呈現的盒子的寬度是200px的時候，咱們須要減去它的左右邊框和左右補白，而後設置爲對應的CSS寬度。例如上圖，咱們設置但願盒子寬度爲200px，則須要先減去左右補白各20px，左右邊框各1px，而後設置對應的CSS寬度158px。這讓代碼看起來有點匪夷所思，尤爲是對新手來講（我就在這個問題上困惑了好久）。我明明設置的寬度是158px，它卻呈現了200px。這多少有點不那麼直觀和一目瞭然。

　　幸運的是，咱們有更好的方法達到咱們想要的目的。

　　二、box-sizing

---

　　與上面不一樣的是，當你設置box-sizing:border-box之後，這就能達到你想要的目的。例如，上面咱們想要一個寬度爲200px的盒子，那麼咱們直接設置寬度爲200px。是否是看起來清晰多了。當再設置它的左右邊框和左右補白後，它的內容區會自動調整。這可能更直接和一目瞭然。CSS代碼以下：

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid #DDD;
}

　　以下圖：

　　實際上，這更被設計者和開發者推崇。

　　三、box-sizing其它的值

---

　　box-sizing一樣能夠設置爲content-box，這樣設置CSS的寬度的時候僅僅是設置的它的內容區的寬度，瀏覽器默認都是如此。如咱們1中舉得例子。

　　box-sizing也能夠設置爲inherit，也就是說從父級元素中繼承該屬性。

　　四、瀏覽器兼容性

---

　　IE8及以上版本支持該屬性，Firefox 須要加上瀏覽器廠商前綴-moz-，對於低版本的IOS和Android瀏覽器也須要加上-webkit-。實際上，不少reset.css或者normal.css裏都包含以下CSS語句，也是比較同意的用法：

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

　　結束語

---

　　看到這兒，相信你確定明白了box-sizing的含義。那麼一樣告訴你的是，這是不少前端面試題常見的知識點之一。面試官一般會問你，CSS設置以下語句後*{box-sizing:border-box;},其做用是什麼？相信你看到如今確定會清楚的回答這個問題了。