标准盒模型和怪异(ie)盒模型的对比

css3中盒子模型

盒模型（英语：box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型。

在css中块级盒子模型也有两种，分别是标准盒模型和IE浏览器的怪异盒模型。默认为标准盒模型（box-sizing:content-box），使用box-sizing：border-box可变成怪异盒模型。

box-sizing: inherit;规定从父元素继承box-sizing。

• 盒模型组成：

  • content：内容区

  • padding：内边距（其颜色随着内容区域背景色而变化）

  • border：边框（可以单独设置颜色）

    • border有多种类型的样式
      • solid：实线
      • dashed：虚线
      • dotted：原点虚线

  • margin（margin不属于盒子的显示区域，它主要体现了盒子的位置）

  

• 标准盒模型和怪异盒模型的异同点：

  1. 标准盒模型的内容区域的宽高就是width和height值，怪异盒模型的内容区域的宽高是width-padding（左右）-border（左右）、height-padding（上下）-border（上下）
  2. 标准盒模型添加padding或者border时，整体上所占空间会变大（(width/height)+padding+border）；怪异盒模型添加padding或者border时，其整体所占空间不发生变化（width和height设定的大小）
  3. 标准盒模型和怪异盒模型的应用场景不同（具体根据实际应用场景而定）

// 标准盒模型                     		                                                                                     // 怪异盒模型 {					                                                                                             { 	width: 200px;				                                                                                          box-sizing: border-box; 	height: 200px;				                                                                                          width: 200px; 	margin: 100px 0;			                                                                                          height: 200px; 	padding: 10px;				                                                                                          margin-top: 100px; 	border: 10px dotted green;		                                                                                          padding: 10px; 	background-color: orange;		                                                                                          border: 10px dashed green; 						                                                                                          background-color: purple; }						                                                                                     } 

效果图：