了解一下css3中的box-sizing

2017年05月27日前端前端开发，CSS

一、概念（直接盗用MDN的概念）

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。

1、content-box

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。

注意: 内边距, 边框 & 外边距都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

2、border-box

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。

注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

这里的维度计算为：

width = border + padding + 内容的 width

height = border + padding + 内容的 height。

3、padding-box

我本来以为padding-box还存在的，但是查了一下Can I Use才发现，这个属性只有Firefox实现了这个值，它在Firefox 50中被删除。所以，一般来说，我们用到的只有content-box和border-box这两个属性了，平时我们用得最多的也就是这两个了。

二、直接上图

.content-box{
    box-sizing:content-box;
    -moz-box-sizing:content-box;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid #E6A43F;
    background: #3385FF;
  }
.border-box{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid #3DA3EF;
    background: #0E9716;
  }