1 盒子模型
- 1 组成： margin border padding content（width、height）
- 2 padding 内填充、内边距、 内补白
- padding 会撑大盒子，padding区域可以出现背景颜色，（不能出现负值）在边框线里边
- 一个值代表上下左右，两个值代表上下、左右，三个值代表上、左右、下，四个值代表上、右、下、左（顺时针）
- 可以单独设置某一个方向：padding-left、right、top、bottom
- 3 margin 外填充、外边距、外补白
- margin会撑大盒子，（如果单指一个盒子而言margin不会撑大盒子，如果在一个大盒子里摆放多个小盒子margin会撑大）
- margin区域不能出现背景颜色，不能设置负值，在边框线外边
- 一个值代表上下左右，两个值代表上下、左右，三个值代表上、左右、下，四个值代表上、右、下、左（顺时针）
- 可以单独设置某一个方向：margin-left、right、top、bottom
- margin:0 auto 可以让这一个块水平居中，注意这个元素不能写float
2 设置百分比值
width=父元素宽度的百分比 height=父元素高度的百分比
padding=父元素宽度的百分比 margin=父元素宽度的百分比
3 margin的负值
-
如果元素没有设置宽度，设置margin的正值会缩小盒子的width，设置负值会增大盒子
-
如果元素设置了宽度，margin正值或者负值不会影响盒子的大小，会影响盒子的显示位置
-
\
-
如果想要123变成213，第二个设置margin-left的负值=2+1的宽度和，由于margin的负值因素导致3的贴边元素变成了1，会跑到整个父元素的外部，解决方式：给1设置margin-left正值，设置为2的宽度
-
\
-
页面实现先加载中间，再加载左右两端，中间自适应，左右固定
\
4 盒子宽高的算法
width=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
height=margin-top+border-top+padding-top+height+padding-bottom+margin-bottom+border-bottom
5 盒子模型分类
- 标准盒子模型（外扩盒子） 怪异盒子模型（内缩盒子）
- 标准盒子模型计算宽高=margin+border+padding+width/height
- 怪异盒子模型计算宽高=margin+width/height(border、padding已包含)
- 在IE的低版本中没有会触发怪异盒子模型
- 标准盒模型和怪异盒模型转换的属性 box-sizing :border-box 怪异盒 content-box 默认值标准盒
- box-sizing: ie7不支持
6 margin和padding的使用
设置两个元素的空隙
- 1 如果两个元素没有背景颜色，中间的空隙用margin、padding都可以
- 2 如果元素存在背景颜色，中间的空隙有背景颜色用padding，没有背景颜色用margin
- 3 边框线距离内容有一定的距离用padding，没有距离用margin
