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

哈喽，大家好，我是前端新人小林，今天和大家分享一下标准盒模型和怪异盒模型的区别。那么首先我们要先要了解一下什么是标准盒模型，什么是怪异盒模型。
标准盒模型
我们大家都知道盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)。盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
如下图所示:

可见此盒模型是由外边界30px，边框区5px，填充区30px，内容区300300px组成的。
怪异盒模型：
怪异盒模型的组成主要由：width（content+border+padding）+margin。
如下图：

在这里我们将标准盒模型转化为怪异盒模型，在里面设置了宽高为300px，边框为10px，填充区为20px，我们来看一下它会变成什么样子。
如下图：

大家可以看到盒子的大小还是300300px，有人可能会说是不是没有添加上，我把键盘都敲烂了它还是300*300像素啊，哈哈，这就是怪异盒模型的魅力所在。
简单通俗的来讲的话就是标准盒模型给边框、填充区添加像素的话，盒子的大小会随着添加像素的多少而改变。也就是我们所说的把盒子撑大了，所以在我们应用的时候要想保持盒子大小不变，就必须把添加的像素抵消掉。而怪异盒模型就是只要你固定好了宽高，无论你添加多少像素的元素，盒子的大小保持不变，但你想要的效果仍然存在。
今天就先跟大家分享到这吧，我是前端新人小林，我们下期见。