标准盒模型&怪异盒模型

标准盒模型&怪异盒模型

盒子模型的组成：

​ 盒子模型一般由：内容（content）、边框（border）、左右外边距（margin-left+margin-right）、左右内边距（padding-left+padding-right）这些部分组成。

CSS中盒子模型分为两种：W3C标准盒模型和IE标准盒模型

1. 标准盒子模型

   1. 标准盒模型中，内容区域是由width属性设置的，而内容周围的padding和margin是另外计算的。
   2. width/height + padding+border+margin = 总长

2. IE标准盒模型（怪异盒模型）

   1. 怪异盒模型中，浏览器的width属性不是内容的宽度，而是内容+内边距+边框的总和；
   2. width/height + margin = 总长（因为在width中已经包含了 内容的宽度+内边距+边框的宽度）

什么是“怪异盒模型”

怪异盒模型与标准盒模型的区别

1. 用途：标准盒子模型主要用于PC端，怪异盒子模型主要用于手机端。

2. 原理：标准盒子模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。

参考文献：

1. https://www.jianshu.com/p/3c24887312b1
2. https://blog.csdn.net/dong_pt/article/details/51281372
3. https://www.jb51.net/css/593017.html