css-------box-sizing

一般来说，我们说元素的总宽度是不包括它的边距（margin)的，而box-sizing这个属性就是设置了元素计算宽度的时候应该从哪个位置开始算起，它的默认值为content-box，也就是说对元素所设定的宽度会应用带钙元素的内容上，而填充和边框值会照常添加上去。

如果把值设置为border-box，则设定的width值是内容，填充和边框的总宽度。

首先，我们先来看看，

以下这段代码产生出来的效果

.top {
    border: 5px solid black;
    background-color: yellow;
    width: 50px;
    height: 50px;
    padding: 10px;
    margin: 10px;
}

由这张图片可以看得出来，元素的宽度是等于80px的，也就是说包括了内容的width=50px,左右border共=10px,左右padding共=20px，所以80=50+10+20。

而今天提到的这个box-sizing属性，我们就可以把元素的宽度真的控制在50px。下面，当我们设置box-sizing这个属性为content-box，其实这个属性的效果跟上图的效果是一致的，内容的宽度依旧是50px.

但是当我们把box-sizing的属性设为border-box的时候呢，效果就是如下图一样，我们设置内容宽度为50px，然后整体表现出来的也是50px ,实际上内容的宽度已经发生改变了，因为当我们设置这个box-sizing为border-box的时候，它的宽度就把内边距和边框都设置进来了，所以内容的宽度只能适应了，由下图可以知道，内容的宽度已经变为20px,但是padding和border依旧没有发生改变的。就是如果我们把width设置为一个值，那么从整体上来，这个元素的宽度就是变现为这个值了。

这个属性在所有主要的浏览器中已经被实现的了，但是在某些浏览器中，该属性前使用浏览器特定的前缀。

在Firefox:-moz-box-sizing

在safari:-webkit-box-sizing

等等。