关于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;
}