把html标签想象成一个盒子，这个盒子里面放着其他的标签（可以看成其他的盒子），其他的盒子里又有盒子，层层嵌套，即所谓的盒模型
盒模型分为IE盒模型(也叫怪异盒模型)和W3C标准盒模型
两者的区别（width,height的计算方式不同）
w3c标准盒模型
width,height = content
IE盒模型
width,height = content+border+padding
可以通过设置box-sizing的值来选择使用哪种模型
-
content-boxw3c标准盒模型（默认） -
border-boxIE盒模型
在 IE8+ 浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在 IE6/7/8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
我们通过例子直观感受一下
w3c标准盒模型
- 没有设置
padding和border的情况（盒子大小是content时的情况）
<div></div>
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
box-sizing: content-box; /* w3c标准盒模型 默认*/
}
image.png
image.png
- 设置
padding和border的情况
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
border: 10px solid #000;
padding: 10px;
/* box-sizing: content-box; w3c标准盒模型 */
}
image.png
image.png
我们发现盒子变大了，但中间蓝色区域为
content,大小依然为100x100,变大是因为额外的padding和border包裹了它
var div = document.querySelector('div')
console.log(window.getComputedStyle(div).getPropertyValue('width')); //100px
getPropertyValue() 方法返回指定的 CSS 属性的值
我们看看IE盒模型
IE盒模型
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
border: 10px solid #000;
padding: 10px;
box-sizing: border-box; /* ie */
}
image.png
image.png
我们发现盒子大小依然和初始值一样，此时盒子的宽高计算为：
content+border+padding = 100 x 100
var div = document.querySelector('div')
console.log(window.getComputedStyle(div).getPropertyValue('width')); //100px
