HTML5-8(盒子模型)
2016-11-08 本文已影响44人
IIronMan
![](https://img.haomeiwen.com/i1728484/e0f9f7b2ac6ad3f9.png)
一.简单的介绍下盒子模型
网页上的每一个标签都是一个盒子,每个盒子都有四个属性
-
1.内容(content)
盒子里装的东西
网页中通常是指文字和图片 -
2.填充(padding,内边距)
怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料
-
3.边框(border):盒子本身
-
4.边界(margin,外边距)
盒子摆放的时候的不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出
下面是一个标准的盒子模型
![](https://img.haomeiwen.com/i1728484/b7d71958abce3892.png)
下面是IE盒子模型
![](https://img.haomeiwen.com/i1728484/923b4bd5ad7a8ffa.png)
二.内容(content)属性
![](https://img.haomeiwen.com/i1728484/af0e7f8e2f8c7a88.png)
三.填充(padding,内边距) – 属性
![](https://img.haomeiwen.com/i1728484/0ea25892f8c12733.png)
![](https://img.haomeiwen.com/i1728484/9ab4dce5bb0caf4c.png)
例如下面的分析
![](https://img.haomeiwen.com/i1728484/942f93d4bb26c44f.png)
四.边框(border) –属性
![](https://img.haomeiwen.com/i1728484/67915f3f4577a7ac.png)
五.边界(margin,外边距) –属性
![](https://img.haomeiwen.com/i1728484/a95b0976a06e0957.png)
![](https://img.haomeiwen.com/i1728484/918385943f55cec2.png)
例如:
![](https://img.haomeiwen.com/i1728484/6eafcdf568ba2761.png)