盒子模型

.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