标准盒模型&怪异盒模型
盒子模型的组成:
盒子模型一般由:内容(content)、边框(border)、左右外边距(margin-left+margin-right)、左右内边距(padding-left+padding-right)这些部分组成。
CSS中盒子模型分为两种:W3C标准盒模型和IE标准盒模型
-
标准盒子模型
- 标准盒模型中,内容区域是由width属性设置的,而内容周围的padding和margin是另外计算的。
- width/height + padding+border+margin = 总长
-
IE标准盒模型(怪异盒模型)
- 怪异盒模型中,浏览器的width属性不是内容的宽度,而是内容+内边距+边框的总和;
- width/height + margin = 总长(因为在width中已经包含了 内容的宽度+内边距+边框的宽度)
什么是“怪异盒模型”
怪异盒模型与标准盒模型的区别
-
用途:标准盒子模型主要用于PC端,怪异盒子模型主要用于手机端。
-
原理:标准盒子模型的大小是由内到外的,由内部决定外部的大小;而怪异盒模型是由外而内的。
参考文献:
- https://www.jianshu.com/p/3c24887312b1
- https://blog.csdn.net/dong_pt/article/details/51281372
- https://www.jb51.net/css/593017.html