css--盒子模型和层叠关系

层叠样式表(英文全称：Cascading Style Sheets)

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

1.1分类：IE盒子模型和标准W3C盒子模型

1.2盒子模型：content、padding、border、margin

1.3区别

W3C盒子模型中：元素的width=content的宽度

IE盒子模型中：元素的width=content+padding+border

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，
那么这个盒子模型占用的宽度为：20 * 2+10 * 2+10 * 2+200=280px;
高度：20 * 2+10 * 2+20 * 2+50=130px;
盒子的实际宽度大小为:10 * 2+10 * 2+200=240px;
实际高度：10 * 2+10* 2+50=90px;

用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20 * 2+50=90px;

box-sizing–border-box 和 content-box

box-sizing: content-box|border-box|inherit;

我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

（1） content-box(默认是content-box)
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

//元素宽度是250px
.test1{  
    box-sizing