盒子模型 容器

含义：

盒子即为容器，在html中任何一个元素都可以称为容器，只不过容器有大有小，区块划分的元素是比较大的容器。文本修饰的标签属于比较小的容器，嵌套规则是大容器套小容器。如上图所示相框是一个盒子，有边框 有内容 内容不是铺满的。

盒子模型的组成部分：

有四个部分组成

1. 内容区域：高度和宽度
2. 内边距区域
3. 边框距区域
4. 外边距区域

内边距规则

含义：

内边距是只内容和边框之间的距离

属性：

1. padding-方向
2. padding-top: 上内边距
3. padding-right: 右内边距
4. padding-botton: 下内边距
5. padding-left: 左内边距

简写属性：

1. padding: 上下左右     一个值
2. padding: 上下 左右    两个值
3. padding: 上 左右 下   三个值
4. padding: 上 右 下 左  四个值

外边距规则

含义：

外边距是指元素与元素之间，边框与边框之间的距离

属性：

1. margin-方向
2. margin-top: 上外边距
3. margin-right: 右外边距
4. margin-bottom: 下外边距
5. margin-left: 左外边距

简写属性：

1. margin: 上下左右       一个值
2. margin: 上下 左右      两个值
3. margin: 上 左右 下     三个值
4. margin: 上 右 下 左    四个值

边框规则

含义：

一个容器的边缘，隔开内外边距

属性：

1. border-方向词
2. border-top: 上边框
3. border-right: 右边框
4. border-bottom: 下边框
5. border-left: 左边框

border: 1px solid red; 1px粗细的边框 实现 红色
border-style: dotted; 点线边框
border-style: dashed; 虚线边框
border-style: solid;  实线边框
border-style: double; 两个边框