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

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

以下属性对行内级非替换元素不起作用：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