盒子模型 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
上课时听到老师说DOCTYPE和怪异盒模型的关联，第一次听到怪异盒模型这个概念的时候我感觉自己孤陋寡闻了，但看到盒模型感觉自己的认识还是挺多的，于是决定去研究一下什么时候会“怪异”。
盒子模型（Box Modle）可以用来对元素进行布局，包括内边距（padding），边框（border），外边距（margin），和实际内容（content）这几个部分。
盒子模型分为两种：标准盒模型和怪异盒模型。
- W3C标准的盒子模型（标准盒模型） ，IE6及以上和当前大部分的浏览器遵循是W3C的标准盒模型，也保留了对怪异盒模型的支持。
- IE标准的盒子模型（怪异盒模型），IE6以下版本的浏览器遵循的是怪异盒模型，怪异模式主要表现在IE内核的浏览器。
这是我自己写的一个测试的例子：
<!DOCTYPE html>
<head></head>
<style>
.div1{
display: inline-block;
width: 200px;
height: 200px;
border: 5px solid #000;
margin: 20px;
padding: 20px;
}
.div2{
display: inline-block;
width: 200px;
height: 200px;
border: 5px solid rgb(217, 64, 64);
margin: 20px;
padding: 20px;
box-sizing: border-box;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
在浏览器开发者模式下，分别选中这两个div，如下图。
1.标准盒模型
标准盒模型中width指的是内容区域content的宽度，height指的是内容区域content的高度。
2.怪异盒模型
怪异盒模型中的width指的是内容、左右边框、左右内边距总的宽度（content + border-left + border-right + padding-left + padding-right）,height指的是内容、上下边框、上下内边距总的高度（content + border-left + border-right + padding-top + padding-bottom）
3.如何选择盒模型？
1.DOCTYPE
为了让网页能兼容各个浏览器，在各种浏览器中都按标准盒模型解析，就要在网页顶部增加DOCTYPE声明。
<!DOCTYPE html>
如果是定义了完整的DOCTYPE的标准文档类型，无论是哪种模型情况，最终都会触发标准模式。
如果DOCTYPE协议缺失，会由浏览器自己界定，在IE浏览器中IE6以下的版本触发怪异模式，其他浏览器中会默认为W3C标准模式。
2.box-sizing
可以通过CSS属性 box-sizing 来设置盒子模型的解析模式。可以为box-sizing赋三种值：
content-box： 默认值，border和padding不算到width范围内，可以理解为是W3C的标准模型(default)。border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型。padding-box：将padding算入width范围
当设置为 box-sizing:content-box 时，将采用标准模式解析计算（默认模式）。
当设置为 box-sizing:border-box 时，将采用怪异模式解析计算。
写到这儿就全明白了，原来自己平时经常用的CSS属性 box-sizing:border-box 居然是用怪异模式计算的，但没有了解到这些，看来在以后的页面布局以及组件中要注意区分两种情况啦~~~
