说明
css 的 box-sizing 样式,取值如下:
content-boxborder-box
content-box
标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型。
padding 和 border 不包含在指定的 width 和 height 之内。
盒子的实际宽度 = width + padding左 + padding右 + border左 + border 右
border-box
怪异盒模型,低版本IE浏览器中的盒模型。
padding 和 border 包含在指定的 width 和 height 之内(不包含 margin)
盒子的实际宽度 = 设置的width(padding和border不会影响实际宽度)
表单控件一般设置该模式,方便设置高度
例子
input高度和button高度不一致的原因(Quirks怪异模式)