.box{
width: 200px;
height: 200px;
background: aquamarine;
border: 1px solid red;
padding: 10px;
margin: 10px;
}
width = 200+1*2+10*2
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
还有一个我们经常使用的属性box-sizing
如果我们使用
.box{
width: 200px;
height: 200px;
background: aquamarine;
border: 1px solid red;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
这个时候元素的宽高算法就变了怪异模式
image.png
元素的实际高度 = 200px-border2-padding2
元素的实际宽度 = 200px-border2-padding2
