所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距、边框、填充和实际内容。

    不同部分的说明：
    Margin：外边距，清除边框外的区域，外边距是透明的。
    Border：边框，围绕在内边距和内容外的边框。
    Padding：内边距，清除内容周围的区域，内边距是透明的。
    Content：盒子的内容，显示文本和图像。
    总元素的宽度 = 宽度 + 左填充（padding） + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
    两种盒模型的比较：
    盒模型分为W3C的标准盒模型和IE盒模型。
    标准盒模型的宽度就是content的宽度，高度是content的高度，而IE盒模型的宽度是content+padding+border的总和。
    切换盒模型的方法：设置box-sizing属性。
    box-sizing: content-box //W3C盒子模型
    box-sizing:border-box //IE盒子模型