一般来说,我们说元素的总宽度是不包括它的边距(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
等等。