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>

執行結果：

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