关于box-sizing属性 - 天上云好白

写在前面

文中错误或不足之处欢迎指正批评，共同交流！

在项目中写css组件时遇到一个问题：

要求两个按钮均分其父元素宽度，且父元素宽度不固定，像这样：

第一反应很自然的想到使用flex布局，但是由于需要兼容ie9以上，以及安卓微信端那个x5浏览器，加之只有两个按钮布局相对简单，所以选择了浮动的方法：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mask"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="confirm"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="confirm-text"</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="confirm-btn confirm-btn-sure"</span><span style="color: #0000ff;">></span>确定<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="confirm-btn"</span><span style="color: #0000ff;">></span>取消<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

<span style="color: #800000;">.mask</span>{<span style="color: #ff0000;">
    ...
</span>}<span style="color: #800000;">
.confirm</span>{<span style="color: #ff0000;">
    ...
</span>}<span style="color: #800000;">
.confirm-text</span>{<span style="color: #ff0000;">
    ...
    clear</span>:<span style="color: #0000ff;"> both</span>;
}<span style="color: #800000;">
.confirm-btn</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    ...
</span>}

但是问题就来了，再给一个按钮加一条侧边的边框，那么就分行显示了。如果每个按钮宽度只给到49%甚至49.5%倒是可以解决这个问题，但如果点击改变背景颜色的时候还是能被发现，而且非常丑，这个时候就可以使用box-sizing: border-box;使元素边框的宽度包含在元素本身宽度内，这样问题就解决了:

<span style="color: #800000;">.confirm-btn</span>{<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    ...
</span>}<span style="color: #800000;">
.confirm-btn:active</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> rgb(235,235,235)</span>;
}<span style="color: #800000;">
.confirm-btn-sure</span>{<span style="color: #ff0000;">
    border-right</span>:<span style="color: #0000ff;"> 1px solid rgb(235,235,235)</span>;
}

下面就来说一说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不再向外延伸，而是往里边挤。

<span style="color: #800000;">.border-box</span>{<span style="color: #ff0000;">
      box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
      width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
      height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
      padding</span>:<span style="color: #0000ff;"> 50px</span>;
}