CSS两种盒子模型详解

所有HTML元素可以看作盒子，在CSS中，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像

 

 

 其中，分为两种，分别为W3C盒模型（标准盒模型）和IE盒模型（怪异盒模型）

W3C盒模型，元素内容占据的空间由width属性设置，padding和border的值另外计算。

　　即：盒子实际总宽度、总高度 = 设置的width、height + border + padding + margin

              设置的width、height = 盒子内容content 的width、height

      如上图数据：  盒子实际总宽度width = 200px + 50px + 50px +50px    

　　　　　　　　 盒子实际总高度height =  20px + 50px + 50px +50px

                              盒子内容content 的width = 设置的width  200px

　　　　　　　　 盒子内容content 的height= 设置的height  20px

IE盒模型，

　　盒子实际总宽度、总高度 = 设置的width、height +  margin = 盒子内容content 的width、height +padding + border + margin

              设置的width、height = 盒子内容content 的width、height + padding + border

      如上图数据：  盒子实际总宽度width = 200px + 50px + 50px +50px    

　　　　　　　　 盒子实际总高度height =  200px + 50px + 50px +50px

　　　　　　　　 设置的 width = 盒子内容content 的width 200px + padding 50px + border 50px

　　　　　　　　 设置的 height = 盒子内容content 的height  20px + padding 50px + border 50px

CSS3指定盒子模型种类

box-sizing 属性，允许以特定的方式定义特定元素

        box-sizing:content-box (W3C标准盒模型)

        box-sizing:border-box (IE怪异盒模型)