CSS基础之标准盒模型和怪异盒模型

标准盒模型和怪异盒模型：盒子的大小是由于盒子的content，padding，border，margin组成的。

标准盒模型：主要是非IE浏览器。

盒子的总宽度：

width = content + padding + border + margin

怪异盒模型：IE浏览器
盒子的总宽度：

content = content + padding + border

width = content + margin

解决兼容性的方式：不要给元素本身添加固定的padding，给其父级元素添加;

css3的box-sizing允许以特定的方式匹配某个区域的特定元素。

box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。