學會使用box-sizing佈局

盒子模型

---

• 關於CSS重要的一個概念就是CSS盒子模型。它控制着頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤其當涉及到高度和寬度計算的時候。真正盒子的寬度(在頁面呈現出來的寬度)和高度，需要加上一些其它的屬性，例如：
  • padding + border + width= 盒子的寬度
  • padding+ border + height = 盒子的高度
• 這看起來並不是那麼直觀，那麼我們看一個圖：

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

• 這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候，我們需要減去它的左右邊框和左右補白，然後設置爲對應的CSS寬度。例如上圖，我們設置希望盒子寬度爲200px，則需要先減去左右補白各20px，左右邊框各1px，然後設置對應的CSS寬度158px。

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

---

box-sizing

• 語法：box-sizing: content-box | border-box | inherit;

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

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

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

• 一些開發人員覺得box-sizing使用起來十分方便,所以他們主張通過通用選擇器將這個屬性應用於每個元素

• 但這樣的觀點未免有些偏激,而且還會導致不必要的困難,所以更好的方法是隻在實際需要時才使用這個屬性

*{
     margin:0;
      padding:0;
     box-sizing:border-box;
}

• 寫上 box-sizing: border-box; ，設置padding值 也不用擔心沒有減小寬度值而變形

---

box-sizing其它的值

• content-box
  • 描述：在寬度和高度之外繪製元素的內邊距和邊框。

• border-box
  • 描述：爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製

• inherit
  • 描述：繼承 父元素 box-sizing屬性的值

---

瀏覽器兼容性

• 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 佈局三欄目案例

div{
        height:700px;
        float:left;
}
div.left{
        width:25%;
        background:red;
}
div.cent{
        width:50%;
        box-sizing:border-box;/*可以改變元素以使其寬度包含填充*/
                /* 現在整個元素,包括填充在內,佔頁面總寬度的50%,所以元素的組合寬度爲100%,這全程它們很好地適應於它們的容器.*/
        background:yellow;
        padding:0 20px;/*加了這個會使盒子內容溢出 但是box-sizing很好的自適應了*/
}
div.right{
       width:25%;
        background:blue;
}

<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>

• 效果