盒子模型

盒子模型的组成

　　content（物品）>padding（填充物）>border（包装盒）>margin（盒子与盒子之间的间距）

　　　　content：内容区域 width 和 height 组成的

　　　　padding：内边距（内填充）

　　　　　　直接设置数值

　　　　padding：10px 10px 10px 10px

　　　　　　　　　上 　 右 　 下 　 左

　　　　　　　单一样式只能写一个值

　　　　margin：外边距（外填充）

　　　　margin：10px 10px 10px 10px

　　　　　　　　　上　 右　 下　 左

　　　　　　单一样式只能写一个值

注意：

　　背景颜色会填充到 margin 以内不包括 margin 的区域（加一个 transparent 是透明的意思）

　　文字会添加在content区域

　　padding不能出现负值，margin可以出现负值

box-sizing：

　　盒尺寸，可以改没变盒子模型的展示形态

　　content-box：宽高作用到content区域（默认值）

　　border-box：宽高作用到 content、padding、border 三个区域

使用场景：

　　不用再去计算一些值

　　结决一些百分百的问题

盒子模型的一些问题：

　　margin叠加问题，出现在上下margin同时存在的时候（会取上下中值较大的作为叠加值）

解决方案L:

　　BFC规范

　　想办法只给一个元素添加间距

margin传递问题，出现在嵌套结构中，只是针对margin-top的问题

解决方案：

　　BFC规范

　　给父容器加边框

　　margin换成padding

扩展内容：

　　margin的左右自适应居中（上下自适应是不可以的）：

　　　　　　margin：auto

　　不设置宽和高的时候会自动去计算容器的大小，节省代码