今天搞一搞box-sizing?

講到box-sizing,首先你要知道什麼是css的盒子模型!
盒子模型有兩種分別是IE的border-box和w3c的content-box.

看了圖可能你就已經明白了,不過還要繼續,簡單來講:

標準 w3c 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分,border-box則是content包含content,padding,border

W3C的標準Box Model:

/*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

IE)傳統下Box Model（IE6如下，不含IE6版本或「QuirksMode下IE5.5+」）:

/*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度)
  /*內盒尺寸計算（元素大小）*/
  Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)

到這基本上你就可以明明白白的了吧?

想想你再佈局的時候有沒有遇到過由於paddingborder致使多列布局打亂了的狀況,明明是想要每行四個元素,可是第四個就是被擠了下去的狀況.

好比三欄佈局來說:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
    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;
    }

或者是ul-li結構,每行展現四個元素等等狀況的佈局,巧妙的運用能夠讓代碼更加精簡和優美.

最後瀏覽器的兼容性:ie9+,火狐加前綴-moz-,低版本ios和android加-webkit-