css 兩種盒模型

一、W3C的標準盒模型

在標準的盒子模型中，width指content部分的寬度

 

二、IE的盒模型

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

 

三、設置兩種模型

• box-sizing: content-box 是W3C盒子模型
• box-sizing: border-box 是IE盒子模型

         默認是第一種

四、例子

.content {

width: 300px;

height: 400px;

border: 5px solid #242424;

padding: 20px; }

在標準盒模型中：

width=300px;height=400px;

在ie盒模型中：

width=300+5*2+20*2

height=400+5*2+20*2