行内非替换元素的注意事项
以下属性对行内级非替换元素不起作用：width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊: padding-top、padding-bottom、上下放箱的border
- width、height不生效
- padding特殊：上下会被撑起来，但是不占据空间
- border特殊：上下会被撑起来，但是不占据空间
- margin特殊：上下的margin是不生效的
CSS属性 - box-sizing
box-sizing用来设置盒子模型中宽高的行为。
- content-box：padding、border都布置在width、height外边
- border-box：padding、border都布置在width、height里边
box-sizing:content-box
元素实际占用宽度 = border + padding + width
元素实际占用高度 = border + padding + height
box-sizing:border-box
元素实际占用宽度 = width
元素实际占用高度 = height 
IE盒子模型
W3C标准盒子模型
IE盒子模型（IE8以下浏览器）
元素的水平居中方案
在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）。
- 行内级元素(包括inline-block元素)：水平居中：在父元素中设置text-align: center。
text-align是让父元素的inline level-box的盒子居中
- 块级元素：水平居中：margin: 0 auto
子元素的width + margin = 父元素container box(包含块)的width