CSS盒子模型布局

CSS盒子模型

盒子模型组成
content->padding->border->margin
用快递类比：物品 -> 填充物->包装盒->盒子与盒子之间的间距

content:内容区域，由width 和 height组成
padding:内边距（内填充）；padding-left/padding-right/padding-top/padding-bottom
只写一个值时：上下左右
只写两个值时：上下、左右
写四个值时：上、右、下、左（顺时针方向）
border:边框线
margin：外边距（外填充）margin-left/margin-right/margin-top/margin-bottom
只写一个值时：上下左右
只写两个值时：上下、左右
写四个值时：上、右、下、左（顺时针方向）
注意
1.背景色填充到margin以内的区域（不包括margin区域)
2.文字会在content区域
3.padding不能为负数，margin可以为负数

box-sizing:盒尺寸

可以改变盒子模型的一个展示形态
默认值（content-box)：width,height->content
border-box:width,height->content,padding,border

盒子模型的一些问题

1.margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只有在上下有，左右是没有这个叠加问题的。
出现上下Margin同时存在的时候，会取上下中值较大的作为叠加的值。
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距

2.margin传递
出现在嵌套结构中，只是针对margin-top的问题
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成Padding

扩展：
1.margin左右自适应是可以的，但是上下自适应是不行的
2.width/height不设置的时候，对模型的影响，会自动取计算容器的大小，节省代码