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