简要画出盒模型，并描述关键要素的含义

盒模型由：外边距（margin）、边框（border）、内边距（padding）、内容（content）组成

元素框的最内部分是实际的内容；直接包围内容的是内边距；内边距的边缘是边框；边框以外是外边距（外边距默认是透明的，因此不会遮挡其后的任何元素）

提示：在IE/Chrom下，background-color应用于content+padding，在firefox下由内容和内边距、边框组成的区域。只有普通文档流中块框的垂直外边距才会发生外边距合并（取大者）。行内框、浮动框或绝对定位之间的外边距不会合并

内边距、边框和外边距都是可选的，默认值是零

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

在w3c盒子模型中：content-box，设置的width/height是指content的height和width，元素框的大小 = margin +border + padding + content

在IE盒子模型中：border-box，设置的width/height是指content+padding+border之和，元素框的大小 = margin + width/height

box-sizing：content-box | border-box | inherit

1）content-box:默认值，使设置的宽度和高度值应用到元素的内容框，盒子（元素框）总宽度=margin+border+padding+width

2）border-box：设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

盒子总宽度=margin+width 。

优点：当设置padding/border的值得时候，使其不会撑破盒子的大小

3）inherit：规定从父元素继承 box-sizing 属性的值