7. css 属性之box-sizing

[inkkk]

在说box-sizing之前先来说一下盒模型，想必大家都比较熟悉,是酱式的

图中是一个宽高都为50的div.下面我们给他加上一个1px的边框

此时元素的宽高将不再是50px了，而是52px,因为元素的宽度=自身宽度 + padding +border

那么问题来了如果我们不想改变元素的宽高，我们设置了50px，不管border 和 padding是多少我们希望元素的宽高始终是50px不变。那就轮到我们的猪脚登场了。

给这个50px宽高 boder 1px 的div加上box-sizing:border-box

我们可以看到元素内容变成了48px 加上 border 的宽度还是50px