CSS3 box-sizing 屬性

標籤：技術分享   預設   ima   html   add   png   href   寬度   element   

box-sizing：content-box|border-box|inherit;

預設值：content-box

適用於：所有接受width和height的元素

繼承性：無

 

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; }

CSS3 box-sizing 屬性