细聊CSS3 box-sizing属性

「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」

关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑，尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度，需要加上一些其它的属性，例如：

• padding + border + width= 盒子的宽度
• padding+ border + height = 盒子的高度

但有的时候，我们不希望这样子，于是就要调整盒子的模型

如何调整呢，就等用box-sizing属性

• 语法：box-sizing: content-box | border-box | inherit;

• 与上面不同的是，当你设置box-sizing:border-box以后，这就能达到你想要的目的。例如，上面我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下：

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

• 实际上，这更被设计者和开发者推崇

• 一些开发人员觉得box-sizing使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素

• 但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性

box-sizing还有其它的值

• content-box：在宽度和高度之外绘制元素的内边距和边框。
• border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
• inherit：继承 父元素 box-sizing属性的值

兼容性方面，IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-