对盒模型的理解

CSS盒子模型又称框模型，包含了元素内容（content），内边距（padding），边框（border），外边距（margin）几个要素。 

其中，标准盒模型中的width和height指的是内容区域的宽度和高度，增加内边距、边框、外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

根据盒模型，元素的宽高应该这样计算：

元素的总宽度：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距