什么是怪异盒模型

盒子模型

在说怪异盒模型之前我们先来了解一下盒模型，盒模型主要是在我们进行页面布局的时候来使用，我的理解是把它比喻成一个可变的框架，你可以往这里面加很多很多的东西去填充它的内容，盒模型又由几个大的部分组成从外到内依次为：margin（外边距）---->border（边框）---->padding（内边距）---->content（元素）为了便于我们理解可以看看下面这张图：

了解了什么是盒模型，在讲怪异盒模型之前我们还要来说一下它的兄弟模型标准盒模型，从上面介绍的我们可知道一个盒模型由外到内依次为margin（外边距）---->border（边框）---->padding（内边距）---->content（元素），图中蓝色的区域就是我们cotent元素的大小，那什么是标准盒模型呢？

标准盒模型

在标准盒模型下，我们给盒模型设置width和height，那么它显示出来后就是content的width和height。那什么是怪异盒模型呢？

怪异盒模型

在怪异盒模型下，我们给盒模型设置width和height，我们拿width来说明就是我们直接设置的宽是content的width+padding的值，height同理。我们可以写一个标准盒模型和怪异盒模型来对比一下：

这是我写的一个标准盒模型，只要在文档首部加了这个语句，即是使用了标准盒模型，如果不加就会由浏览器决定，不定义DOCTYPE，就会触发怪异模式。
我们可以看到这个盒模型就是典型的标准盒模型，我们给它定义了1000px的width和500px的height，那么我们可以看到content的width就是1000px，hieght就是500px。
那我们看看当我们给它设置了怪异盒属性看会发生什么改变：


可以看到在在我们把这个变成怪异盒模型以后它的content的width和height都发生了变化，就像我们前面说的那样，在怪异盒模型中我们给它设置width和height，宽是content的width+padding的值，即content的width=设置的width-2padding宽的值-2border的值,content的width=1000-22-25=986px，height同理。

这样对比以后我们是不是就可以明白什么是怪异盒模型了，而且对盒模型和标准盒模型有了一定的理解。

那我们要怎么去设置怪异盒模型，从上面的代码我们可以得知只要给它设定一个box-sizing的属性并且令其值等于border-box即可。当然box-sizing属性还有很多其他的值，这里我们就只了解2个值即border-box（怪异盒模型）、content-box（标准盒模型）。当设置为：
box-sizing: border-box;将采用标准模式
box-sizing: content-box;将采用怪异模式

关键字：盒模型 标准盒模型 怪异盒模型

MakeMo
2020/2/22