（1）盒子模型

1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。
CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。
2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。
3、 一个盒子的实际高度（宽度）是由content+padding+border组成。
可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
5.1 盒子模型概述 - 图1

（2）常用样式

单位 值 作用
width 长度 | 百分比 设置标签宽度
height 长度 | 百分比 设置标签高度
max-width 长度 | 百分比 设置标签最大宽度
max-height 长度 | 百分比 设置标签最大高度
min-width 长度 | 百分比 设置标签最小宽度
min-height 长度 | 百分比 设置标签最小高度
border 边框粗细 边框样式 边框颜色 设置边框显示效果
border-width 长度 设置边框粗细
border-style none | hidden | solid | dashed | dotten | double… 设置边框样式
border-color 颜色 设置边框颜色
border-top 边框粗细 边框样式 边框颜色 设置标签顶部边框
border-left 边框粗细 边框样式 边框颜色 设置标签左边边框
border-right 边框粗细 边框样式 边框颜色 设置标签右边边框
border-bottom 边框粗细 边框样式 边框颜色 设置标签底部边框
margin 上边距 右边距 下边距 左边距 设置标签四边的外延边距
margin-left 长度 | 百分比 设置标签左边的外延边距
margin-right 长度 | 百分比 设置标签右边的外延边距
margin-top 长度 | 百分比 设置标签顶部的外延边距
margin-bottom 长度 | 百分比 设置标签底部的外延边距
padding 上边距 右边距 下边距 左边距 设置标签四边的内部边距
padding-left 长度 | 百分比 设置标签左边的内部边距
padding-right 长度 | 百分比 设置标签右边的内部边距
padding-top 长度 | 百分比 设置标签顶部的内部边距
padding-bottom 长度 | 百分比 设置标签底部的内部边距