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;
}