盒子模型

网页上的每一个标签都是一个盒子，接下来我们学习下这个东西

盒子都有四个属性.png

---

每一个盒子都有四个属性

• content：内容

  • 盒子里面装的东西
  • 网页中通常指文字和图片

• padding：内边距

  • 怕盒子里面装的(贵重的)东西损坏。而添加的泡沫或者其他抗震的辅料

• border：边框(也可以理解为盒子本身)

• margin：外边距，把盒子之间分开

  • 盒子摆放的时候不能全部堆放在一起，盒子之间的要留一定的空隙保持通风，同时也是为了方便取出。

---

• 标准盒子模型

标准盒子模型.png

• IE盒子模型

IE盒子模型.png

---

盒子都有四个属性

• 1、内容（content）- 属性

content属性.png

• 2、填充（padding，内边距）- 属性

padding属性.png

padding写法.png

• 3、边框（border）- 属性

border属性.png

• 4、边界（margin，外边距）- 属性

margin属性.png

margin用法.png

---

练习： 关键：搞清楚四个属性分别对应什么即可

QQ截图20160906140206.png

QQ截图20160906140333.png

QQ截图20160906140424.png