CSS盒模型基础

盒模型是CSS布局的基础，主要由三部分组成：边框、内边距、外边距。

边框(border)

1. 四个边的边框

例如：

border-width: 1px;
border-style: solid;
border-color: red;

边框可以三个属性简写，格式如下：

border: 宽度 样式 颜色;

例如：

border: 1px solid red;

这一行代码与以上三行完全一致。

2. 单个边的边框

2.1 上边边框

例如：

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

简写格式border-top: 宽度 样式 颜色;

例如：

border-top: 1px solid red;

这一行代码与以上三行完全一致。

2.2 右边边框

例如：

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;

简写格式border-right: 宽度 样式 颜色;

例如：

border-right: 1px solid red;

这一行代码与以上三行完全一致。

2.3 下边边框

例如：

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;

简写格式border-bottom: 宽度 样式 颜色;

例如：

border-bottom: 1px solid red;

这一行代码与以上三行完全一致。

2.4 左边边框

例如：

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

简写格式border-left: 宽度 样式 颜色;

例如：

border-left: 1px solid red;

这一行代码与以上三行完全一致。

3. 四个边的边框简写

下面的三个属性实际上是一个简写，可以用来分别设置四个边框的宽度、样式和颜色。

3.1 边框的宽度

• 一个属性值：上下左右四个边框使用相同的宽度。
  例如：border-width:四个边框宽度

• 两个属性值：上下两个边框使用相同的宽度，左右两个边框使用相同的宽度。
  例如：border-width:上下边框宽度 左右边框宽度

• 三个属性值：上边框宽度，左右两个边框使用相同的宽度，下边框宽度。
  例如：border-width:上边框宽度 左右边框宽度 下边框宽度

• 四个属性值：上左下右四个边框按照顺序使用各不相同的宽度。
  例如：border-width:上边框宽度 右边框宽度 下边框宽度 左边框宽度

3.2 边框的风格

• 一个属性值：上下左右四个边框使用相同的风格。
  例如：border-style:四个边框风格

• 两个属性值：上下两个边框使用相同的风格，左右两个边框使用相同的风格。
  例如：border-style:上下边框风格 左右边框风格

• 三个属性值：上边框风格，左右两个边框使用相同的风格，下边框风格。
  例如：border-style:上边框风格 左右边框风格 下边框风格

• 四个属性值：上左下右四个边框按照顺序使用各不相同的风格。
  例如：border-style:上边框风格 右边框风格 下边框风格 左边框风格

3.3 边框的颜色

• 一个属性值：上下左右四个边框使用相同的颜色。
  例如：border-color:四个边框颜色

• 两个属性值：上下两个边框使用相同的颜色，左右两个边框使用相同的颜色。
  例如：border-color:上下边框颜色 左右边框颜色

• 三个属性值：上边框颜色，左右两个边框使用相同的颜色，下边框颜色。
  例如：border-color:上边框颜色 左右边框颜色 下边框颜色

• 四个属性值：上左下右四个边框按照顺序使用各不相同的颜色。
  例如：border-color:上边框颜色 右边框颜色 下边框颜色 左边框颜色

内边距(padding)

内边距是元素边框与元素内容之间的空白区域，与表格cellpadding相似

以上可以使用简写

padding: 上内边距  右内边距  下内边距  左内边距;

padding: 上内边距  左右内边距  下内边距;

padding: 上下内边距  左右内边距;

padding: 上下左右内边距;

外边距(margin)

外边距是元素边框外的空白区域。

以上可以使用简写

margin: 上外边距  右外边距  下外边距  左外边距;

margin: 上外边距  左右外边距  下外边距;

margin: 上下外边距  左右外边距;

margin: 上下左右外边距;