content-box跟border-box的區別

本文轉載於:猿2048網站➣content-box跟border-box的區別

content-box：

padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding )

此屬性表現爲標準模式下的盒模型。

border-box：

padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )

此屬性表現爲怪異模式下的盒模型。

示例：

• content-box:

  .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

• border-box:

  .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }