标准盒模型和怪异盒模型的讲解

目录

1. 什么是盒子模型？

2. 盒模型分为几种？

3. 标准模型和怪异模型的转换

4. JS盒模型

 5. 盒模型的使用

---

1. 什么是盒子模型？

在HTML页面中，每一个元素都可以看作一个盒子。

这个盒子由：内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。

2. 盒模型分为几种？

盒模型根据浏览器的不同，所使用的盒子模型也不一样。(IE使用的是怪异盒模型，但是在IE10以后，改用其他的了)

盒模型分为两种：

标准盒模型：一个块的总宽度 = width + padding（左右）+ border（左右）+ margin（左右）

怪异盒模型：一个块的总宽度 = width + margin（左右）（怪异盒模型中的width已经包含了padding和border的值）

3. 标准模型和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

4. JS盒模型

除了标准盒模型和怪异盒模型外，在JS中还有一个JS盒模型，了解即可

 5. 盒模型的使用

使用盒模型会产生双边距重合问题，这个时候就需要 BFC（下篇讲解）