标准盒子模型和怪异盒子模型
一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。
一、概念
标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。二、计算方法
标准盒子模型的内容计算：content=width*height，
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
总宽度等于所有附加值，偏移值的总和；
怪异盒子模型的内容计算：content=width*height+padding+border
盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；
三、默认盒模型
在编辑html文档时，只要在顶部声明了DOCTYPE，默认都会使用标准盒子模型。如果没有进行声明，则会根据浏览器类型自行调整；
四、盒模型转换
在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型
五、演示代码
首先在页面中设置两个具有固定宽高的div盒子，将他们分别设置为标准盒子模型和怪异盒子模型。
<style type="text/css">body {height: 100vh;display: flex;justify-content: center;align-items: center;}div {width: 300px;height: 300px;line-height: 300px;text-align: center;margin-right: 10px;font-size: 30px;}.box1 {box-sizing: content-box;background-color: #FF0000;}.box2 {box-sizing: border-box;background-color: #CD5C5C;}</style></head><body><div class="box1">标准盒子模型</div><div class="box2">怪异盒子模型</div></body>
效果如图
给box1设定padding值
padding: 50px 50px;
得到以下结果
很明显大小发生了改变，利用f12检查发现，盒子不仅保存了原有内容的大小，还根据padding值进行了相应的放大。
再为box2添加同样的属性
padding: 50px 50px;
再使用f12检查
可以看到，盒子的大小不仅没有增加，原本的内容区域还根据padding值相应的进行了缩小。
六、总结
使用标准盒子模型时，盒子的宽高不会因为第一次的设定而持久不变，还可以通过padding值的设定来进行二次放大；
使用怪异盒子模型时，宽高在第一次设定时就已经固定，不会因为后期padding值的设定而放大，只会相对应的调整内容的位置。
在实际开发中，怪异盒子模型能够在不影响基础布局的情况下，调整内容的位置，大小，是一个很值得一用的属性。
这里是万物之恋，我们下次再见了！
