在H5技术中，CSS框模型又称为盒子模型（Box Model），它就像我们日常生活中的常见事物——盒子，是用来描述HTML元素形成的。
盒模型是CSS中使用的一种思维模型，可分为两类，一类是标准盒模型是W3c盒模型标准，另一类是怪异盒模型（也称IE模型）是IE低版本盒模型标准，；那盒模型具体是由哪几部分组成的？
来看看我们的盒子图

根据这张图我们可以由外而内看到margin、border、padding、auto这几个单词，但你如果因此断定这就是它的组成就大错特错了，实际上除了图中米黄色、灰色、浅紫色之外还有最中心的淡绿色模块，它就是我们会在浏览器最终显示出来的模块——content，而上面提到的auto是自动的意思。
所以，盒模型是由margin、border、padding、content四部分组成的。

    content（内容）区域是写盒子里面需要显示出来的文字/图片等信息。
    例如以下div里的img、h4标签中的内容     

	<div>
			<img src="img/teacher_09.jpg"/>
			<h4>2019年注册会计师课程</h4>
		</div>

		border（边框）可以创建不同宽度、样式和颜色的边框。
		例如以下div的样式

<div style="border: 1px solid red">   
                border
		</div>

      padding（内填充/内边距）根据上面图中浅紫色的区域可知，它是content和border之间的区域，这个区域在浏览器中可见但并不明显，这个属性当你需要把内容往里缩时可以适当把值调大，反之亦可。
      如下

<div style="padding: 15px; border: 1px solid red;">   
                 border
		</div>

   margin（外边距）根据上图米黄色区域可知，它是border和虚线间的区域，也是盒子模型的最外层区域，这个区域在浏览器中可见但也不明显，这个属性可以应用在移动位置、调整不同容器的间距等。

<div style="margin:10px; padding: 15px; border: 1px solid red;">   
                border
		</div>

标准盒模型和怪异盒模型的异同点：
相同：两类盒模型组成部分相同（content、padding、border、margin）
异同：两类模型宽高及所占空间总高度不同（计算方法不同）

标准盒模型的宽度：左右padding+左右border
         所占空间总宽度=width+左右padding+左右border+左右margin
怪异盒模型的宽度：width（padding和border）
        所占空间总宽度=width+左右margin
     
     怪异盒需要CSS3属性box-sizing来设置
     语法：box-sizing：content-box|border-box|inherit；
     box-sizing：content-box；默认值，为W3c盒模型
      box-sizing：border-box；IE盒模型