盒模型——IE盒模型和W3C盒模型

W3C盒模型

.box{
  margin: 10px;
  padding: 20px;
  border: 5px solid pink;
  width: 120px;
  height: 120px;
  box-sizing: content-box; /*是W3C盒模型*/
}

可以看到得到的盒子宽度和高度是120+20+20+5+5+10+10 = 190px

 

IE盒模型

.box{
  margin: 10px;
  padding: 20px;
  border: 5px solid pink;
  width: 120px;
  height: 120px;
  box-sizing: border-box; /*是IE盒子模型*/
}

 

可以看到得到的盒子宽度和高度是120+10+10 = 140px  ！ 其中的120 = 70+20+20+5+5。 也就是设置的div宽度包括了内容内边距和边框的宽度。

通过这两对盒子进行对比可以清楚看到两种盒模型的区别

区别：IE盒模型的内容的宽度中，给div设置的宽度包含padding和border。而W3C盒模型不包含。

 

盒子需要占据的空间宽度

盒模型：

盒子实际宽度（高度）=内容（content）+间隙（padding）+边框（border）+间隔（margin）

 

可以看出两个盒模型的区别在于——box-sizing   它默认属性是content-box  

盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）