一、认识盒子模型

二、box-sizing

1. content-box

padding、border都布置在width、height外边,如W3C标准盒子模型

元素的实际宽度=border+padding+width 元素的实际高度=border+padding+height

2. border-box

padding、border都布置在width、height里边,如IE盒子模型（IE8以下浏览器）

元素的实际宽度=width 元素的实际高度=height

三、外边距margin的传递和折叠

1. 上下margin的传递

• 如果块级元素的顶部线/底部线和父元素的顶部线/底部线重叠，那么这个块级元素的margin-top/margin-bottom会传递给父元素。
• 如何防止出现传递问题？
  • 给父元素设置padding-top/padding-bottom
  • 给父元素设置border
  • 触发BFC：设置overflow为auto 注：margin一般用来设置兄弟元素之间的间距; padding一般用来设置父子元素之间的间距

2. 上下margin的折叠

• 垂直方向上相邻的两个margin(margin-top、margin-bottom)有可能会合并为一个margin，这种现象叫做collapse
• 水平方向上的margin永远不会collapse
• 防止margin collapse：只设置其中一个元素的值

四、行内非替换元素的注意事项

1. 行内非替换元素

span/a/strong/i

2. 以下属性对行内非替换元素不起作用

width、height、margin-top、margin-bottom

3. 以下属性对行内级非替换元素的效果比较特殊

• padding：上下会被撑起来，但是不占据空间
• border：上下会被撑起来，但是不占据空间
• margin：上下不生效

五、元素的水平居中问题

1. 行内级元素

text-align: center

2. 块级元素

margin: 0 auto;
margin的初始值都是0，但块级元素独占一行，浏览器在渲染时，若块级元素设置了固定的宽度，就会默认将该行剩余的宽度赋给margin-right。这个时候，给margin-left和margin-right都设置值为auto，浏览器就会自动将该行剩余的值左右平分分配给margin-left和margin-right，使得块级元素水平居中