淺談CSS3中的box-sizing（content-box與border-box）

CSS3中的box-sizing 屬性允許以特定的方式來指定盒模型，有兩種方式：

• content-box：標准盒模型，又叫做 W3C盒模型，一般在現代瀏覽器中使用的都是這個盒模型
• border-box：怪異盒模型，低版本IE瀏覽器中的盒模型

現代瀏覽器和IE9+默認值是content-box。
語法格式：

box-sizing：content-box | border-box

 

區別：

• content-box：padding和border不被包含在定義的width和height之內。
  盒子的實際寬度=設置的width+padding+border
• border-box：padding和border被包含在定義的width和height之內。
  盒子的實際寬度=設置的width（padding和border不會影響實際寬度）

我們新建一個HTML頁面來詳細解釋

div{ height:200px; width:200px; background:green; margin:50px; border:20px solid black; padding:20px; } .div1{ box-sizing:content-box; } .div2{ box-sizing:border-box; }

 

javascript代碼：

<script> var div =document.getElementsByTagName("div"); console.log("content-box寬度="+div[0].offsetWidth); console.log("border-box寬度="+div[1].offsetWidth); </script>

 

運行結果：

—————————————————————————————
分析：