content-box:padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、padding之和,即 ( Element width = width + border + padding )此屬性表現為標準模式下的盒模型。bor ...
- 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; }