一个简易的html盒子模型

一.盒子的基本概念

所谓盒子模型，其实就是在网页设计中进行CSS样式设置所使用的一种思维模型。使用盒子模型主要是为了便于控制网页中的元素。在盒子模型中，一个页面就是有大大小小许多盒子通过不同的排列方式堆积而成，这些盒子相互之间彼此影响。因此，我们既要理解每个盒子内部的机构，也需要理解盒子之间的关系以及相互的影响。

二.盒子模型的组成（以HTML盒子为例）

html中的每一个标签都是一个盒子，并且这个盒子有四个属性，如下：

1. content    内容
2. padding   内边距
3. border     边框
4. margin    外边距

三.代码示例

具体效果: