怪异盒模型

标准盒子模型和怪异盒子模型

• • 一、概念
  • 二、计算方法
  • 三、默认盒模型
  • 四、盒模型转换
  • 五、演示代码
  • 六、总结

今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。

 

一、概念

1. 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
2. ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

二、计算方法

1. 标准盒子模型的内容计算：content=width*height，
   盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
   总宽度等于所有附加值，偏移值的总和；

2. 怪异盒子模型的内容计算：content=width*height+padding+border
   盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

三、默认盒模型

在编辑html文档时，只要在顶部声明了DOCTYPE，默认都会使用标准盒子模型。如果没有进行声明，则会根据浏览器类型自行调整；

四、盒模型转换

在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型