本文轉載於:猿2048網站➣content-box跟border-box的區別php
-
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; }
