CSS盒子模型——box-sizing属性、margin叠加和传递问题
作者：互联网
盒子模型：
盒子模型包括content（内容区域）->padding（内边距）->border（边框）->margin（外边距）。
注：
1、背景颜色会填充到margin以内的区域。
2、文字会在content区域。
3、padding不能出现负值，margin可以出现负值。
标准盒子模型：
标准盒子模型的width和height设置的宽度和高度指的是content区域的大小。
box-sizing属性：
box-sizing属性翻译就是盒尺存属性。即改变盒子模型的显示形态。
默认值：content-box，即标准盒子模型，width和height属性表示content区域的大小；
border-box值，使得width和height属性表示content+padding+border区域的大小，使用场景：解决一些宽度100%的问题。
margin的叠加问题：
相邻两个元素margin同时存在时，会取margin值较大的作为叠加的值。
解决办法：
1、BFC规范；
2、只给一个元素添加间距。
margin的传递问题：
当是嵌套结构时，有且只有margin-top会出现传递的问题，其他三个方向是没有传递问题的。
解决方案：
1、BFC规范。
2、给父容器添加边框。
3、将子容器的margin属性去掉，在父容器中添加padding属性。
margin的自适应问题：
margin可以左右自适应，但是不能上下自适应。
左右自适应可以实现容器的水平居中。
如：
.box{ margin:0 auto; }
标签：box,sizing,padding,盒子,content,margin,属性 来源： https://blog.csdn.net/BeWorriedJava/article/details/114649628