css 中 box-sizing 的 border-box、content-box 的区别

box-sizing 默认值为 content-box，当做如下设置：

box-sizing: content-box; 
width: 600px;
height: 600px;
margin: 10px;
padding: 10px;
border: 1px solid #000;

元素的尺寸如下：

元素的宽为：内容区+margin+padding+border，即 600+10+10+1。内容区宽度为 600，实际占据的宽度为 621。

其他属性值不变，box-sizing 改为 border-box，如下：

box-sizing: border-box; 
width: 600px;
height: 600px;
margin: 10px;
padding: 10px;
border: 1px solid #000;

元素实际占据的宽度为600，内容区的宽度为 600-margin-padding-border，即 600-20-20-1，内容区的宽度为578。

box-sizing 默认值为 content-box，width 设置的是内容区的宽度；box-sizing 默认值为 border-box，width 设置的是元素占据空间的宽度。