box-sizing详解

1.作用

用于改变css的盒模型

2.box-sizing三兄弟

• content-box：
  宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。具体如下图所示：

  
  

• border-box：
  为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。具体如下图所示：
  

• inherit：
  规定应从父元素继承 box-sizing 属性的值。

3.content-box与border-box的差异

.css

.imgBox img {
width: 140px;
height: 140px;
padding: 20px;
border: 20px solid pink;
margin: 10px;
}

#contentBox img {
box-sizing: content-box;
}

#borderBox img {
box-sizing: border-box;
}

.html

<div id="contentBox">
    <div class="imgBox">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770282747,1971577128&fm=26&gp=0.jpg" />
    </div>
</div>
<div id="borderBox">
    <div class="imgBox">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770282747,1971577128&fm=26&gp=0.jpg" />
    </div>
</div>

4.浏览器支持

其实大部分浏览器都支持box-sizing，但像IE浏览器就要IE8以上才支持。在开发过程中我们可以使用-moz-box-sizing（前缀），-webkit-box-sizing（内核）解决浏览器不支持box-sizing的问题，部分浏览器使用实例如下：

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */，

5.总结

不理解box-sizing元素属性的同学很容易被坑。首先是盒子大小的问题，其次是浏览器兼容。所以在实际工作中我们还是更应该去了解元素的属性，本文适合初学者。