關於box-sizing屬性

寫在前面

文中錯誤或不足之處歡迎指正批評，共同交流！

在項目中寫css組件時遇到一個問題：

要求兩個按鈕均分其父元素寬度，且父元素寬度不固定，像這樣：

第一反應很自然的想到使用flex布局，但是由於需要兼容ie9以上，以及安卓微信端那個x5瀏覽器，加之只有兩個按鈕布局相對簡單，所以選擇了浮動的方法：

<div class="mask">
  <div class="confirm">
    <div class="confirm-text">提示信息</div>
    <div class="confirm-btn confirm-btn-sure">確定</div>
    <div class="confirm-btn">取消</div>
  </div>
</div>

.mask{
    ...
}
.confirm{
    ...
}
.confirm-text{
    ...
    clear: both;
}
.confirm-btn{
    float: left;
    width: 50%;
    ...
}

但是問題就來了，再給一個按鈕加一條側邊的邊框，那么就分行顯示了。如果每個按鈕寬度只給到49%甚至49.5%倒是可以解決這個問題，但如果點擊改變背景顏色的時候還是能被發現，而且非常丑，這個時候就可以使用box-sizing: border-box;使元素邊框的寬度包含在元素本身寬度內，這樣問題就解決了:

.confirm-btn{
    box-sizing: border-box;
    float: left;
    width: 50%;
    ...
}
.confirm-btn:active{
    background: rgb(235,235,235);
}
.confirm-btn-sure{
    border-right: 1px solid rgb(235,235,235);
}

下面就來說一說box-sizing這個屬性。

box-sizing屬性

box，如大家所熟知的，是css布局中最小的單位，所有的布局都是由一個一個矩形的box搭建出來的，就很像是搭積木那樣。而每一個box都會由四部分組成，包括：content，padding，border，margin。那么box的高寬是如何計算的呢？css中有一個屬性叫box-sizing，該屬性取不同的值會決定box高寬不同的計算方式。

先來說說兼容性，目前測試IE9以上版本以及其他現代瀏覽器都兼容這個屬性。

這個屬性有三個可取值，分別是：content-box,padding-box,border-box，默認值為content-box，但是padding-box的兼容性似乎存在問題，最新版chrome和safari也不能生效，故本文中暫時不做討論。

1.content-box(默認值)

 這也就是最常規的計算方式，某個box的高等於它的height＋padding＋border＋margin，寬也是同理，以下不再贅述。

2.border-box

當取值為border-box時，這個box的高就等於它的height＋margin了，也就是說該box的height是由content部分的height和padding以及border共同組成的了，換言之，padding和border不再向外延伸，而是往里邊擠。

.border-box{
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      padding: 50px;
}