CSS将页面中的所有元素都设置为一个矩形盒子
CSS对页面的布局，即对不同的盒子在网页中进行定位
每个盒子由以下几个部分组成：
内容区(content)
- 元素中的所有内容,子元素,文本等都在内容区中
- 内容区的大小由宽度width、高度height属性来设置
- 内容区的背景颜色由background属性来设置
内边距(padding)
- 含义/作用：内容区到边框之间的距离
- 属性名：padding-top padding-right padding-bottom padding-left
- 属性值：间距值
- 简写：padding:（上右下左顺序）
- 内边距的设置会影响到盒子的大小
边框(border)
- 含义：边框属于盒子边缘，边框里属于盒子内部，边框外属于盒子外部
- 作用：划定当前元素与其他元素之间的分割线
- 属性名：border-style border-color border-width
-（border-top border-right border-bottom border-left） （上右下左顺序） - 属性值：border-style默认none；border-color默认为黑色；border-width默认2-3px
- 简写：border: border-style border-color border-width(无顺序区分)
- 边框的设置会影响到盒子的大小
对于一个CSS盒模型来说，它的可见框的实际宽度或高度是由内容区、内边距和边框决定的。即：
W=border-left + padding-left + width(content) + padding-right + border-right
H=border-top + padding-top + height(content) + padding-bottom + border-bottom
外边距(margin)
- 作用：调整当前元素与其他元素之间的距离
- 属性名：margin-top margin-right margin-bottom margin-left
- 属性值：间距值（可为负值 ）
- 简写：margin:（上右下左顺序）
- 外边距不会影响的盒子可见框的大小，但会影响盒子的位置
- 需注意垂直外边距的折叠现象，必要时进行修正
元素在页面中是按照自左向右的顺序排列的；所以，默认情况下，设置margin-top和margin-left会移动元素自身，设置margin-bottom和margin-right会移动其他元素。
*补充 *
行内元素的盒模型
- 行内元素不支持设置宽度width和高度height
- 行内元素可以设置padding/border/margin，但垂直方向的padding/border/margin不会影响页面的布局，水平方向则按属性值增加
- display属性可以用于设置元素显示的类型：
inline 设置显示为行内元素
block 设置显示为块状元素
inline-block 设置显示为行内块元素（可设置宽度和高度，但不会独占一行）
table 设置显示为表格
none 设置不显示