目录
1. 概述
盒子的诗
天苍苍，野茫茫
风吹草地见盒子
在 CSS 世界里没有牛和羊，有的只是各种各样的盒子。
HTML 文档以树状方式存储了各种 HTML 元素，如 <p> 元素、<div> 元素等。但在 CSS 看来，这些元素都是盒子，如p盒子，div盒子。因此 CSS 是一个盒子的世界，盒子挨着盒子，盒子套着盒子，如下图所示。
无论是大盒子还是小盒子，无论是p盒子还是div盒子，他们都有着共同的基因：一块矩形区域，具有相同的结构。由此可见：
- CSS 盒子是一个二维盒子，其形状是一个矩形
- CSS 盒子有结构，它由从内到外的几个部分构成
2. CSS 盒子结构
了解 CSS 盒子结构，熟练掌握对 CSS 盒子各组成部分属性的设置是前端设计师的必修课。
CSS 盒子是一个以内容为核心的小系统，最里面是内容（如要显示的文字），往外依次为内边距，边框、外间距。 CSS 盒子结构组成如下图所示。
内容是实际要显示的文本、图像等信息，设计师可以为内容设置背景色 (background)、宽 (width)、高 (width)等属性。
内边距 (padding) 是内容和边框之间的距离。设计师可对上、下、左、右四个内边距分别设置大小。内边距所占空间的背景色不能单独设置，这块空间的背景色与内容区背景色一致。
边框 (border) 是环绕内容和内边距之外的框。设计师可对上、下、左、右四个边框分别设置属性，包括边框宽度、颜色、样式等。
外间距 (margin) 是边框与其它盒子之间的间隔距离。设计师可对上、下、左、右四个外间距分别设置大小。外边距所占空间无背景色，或者说背景色是透明的。
CSS 盒子的大小由以上几个因素综合确定，包括内容区域的宽高、内边距大小、边框大小、外间距大小等。
3. CSS 盒子属性
CSS盒子属性众多，主要属性包括：
- 内容宽度 (width)
- 内容高度 (height)
- 内边距 (padding)
- 上内边距大小 (padding-top)
- 下内边距大小 (padding-bottom)
- 左内边距大小 (padding-left)
- 右内边距大小 (padding-right)
- 外间距 (margin)
- 上外间距大小 (margin-top)
- 下外间距大小 (margin-bottom)
- 左外间距大小 (margin-left)
- 右外间距大小 (margin-right)
- 边框设置 (border)
- 上边框设置 (border-top)
- 下边框设置 (border-bottom)
- 左边框设置 (border-left)
- 右边框设置 (border-right)
以上属性的位置分布如下图所示。
这些属性的设置我们将在后续章节进行详细说明。
