css盒模型（W3C标准盒模型、IE怪异盒模型、box-sizing）

所有的HTML元素都可以看作是盒子，每个盒子包括：
外边距（margin）、边框（border）、内边距（padding）、内容（content）

W3C标准盒模型

设定的height与width就是content的高度与宽度，

盒子总宽度=margin + border + padding + content/width
盒子总高度=margin + border + padding + content/height

IE怪异盒模型

设定的height与width是包括了border、padding、content的，

盒子总宽度=margin + width = margin + border + padding + content
盒子总高度=margin + height = margin + border + padding + content

box-sizing

box-sizing有三个值：

• content-box
• border-box
• inherit

content-box：width和height分别应用到元素的content。在width和height之外绘制元素的padding和border。即W3C标准盒模型

border-box：为元素设定的width和height决定了元素的边框盒。为元素指定的任何padding和border都将在已设定的width和height内进行绘制。content=width/height - padding - border。即IE怪异盒模型

box-sizing应用场景：有时在width为100%时需要将content缩小，把box-sizing值设为border-box，增加padding的值。