在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盒模型   

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。