css盒子box-sizing属性

1、css3中新增了一个box-sizing属性这个属性可以保证我们给盒子设置padding和border之后盒子元素的宽度和高度不变

2、box-sizing属性是如何保证增加padding和border之后盒子的元素宽度和高度不变?
增加padding和border之后要想保证盒子的元素宽度和高度不变那么就必须减去一部分内容的宽度和高度

3、box-sizing取值
3.1 content-box取值
元素的宽高= 边框+内边距+内容宽高

3.2 border-box取值
元素的宽高=width height的宽高

4注意点
4.1如果两个盒子是嵌套关系那么设置了里面一个盒子顶部的外边距,外面一个盒子也会被顶下来
4.2如果外面的盒子不想一起被顶下来,那么可以给外面的盒子添加一个边框属性
4.3在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,应该首先考虑padding,其次才是margin,margin本质上是用于控制兄弟关系之间的间隙的