标准盒模型和怪异盒模型的讲解
⽬录
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. 盒模型的使⽤box sizing
使⽤盒模型会产⽣双边距重合问题，这个时候就需要 BFC（下篇讲解）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。