介绍
CSS盒模型本质是一个盒子，由外边距margin、边框border、内填充padding和实际内容content组成。
CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型）。
两种盒模型的区别在于他们的总宽度的计算公式不一样。
在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。
标准盒模型
width = 内容（content）的宽度
height = 内容（content）的高度
总宽度：width + margin（左右） + padding（左右） + border（左右）
总高度：height +margin（上下） + padding（上下） + border（上下）
增加内填充padding、边框border和外边距margin不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒模型（怪异盒模型）
width = border + padding + 内容（content）的宽度
height = border + padding + 内容（content）的高度
总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）
总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）
增加内填充padding 、边框border 后，真正宽度或高度就会改变。
