css的box-sizing,以及值:content-box和border-box

说明

css 的 box-sizing 样式,取值如下:

  • content-box
  • border-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怪异模式)


原文出处:/show_1IX3xsFVK6GU.html