7.CSS基础_盒子模型简介

在使用CSS进行网页布局时，我们一定离不开盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。

盒子的组成

一个盒子由外到内可以分成四个部分：

• content（内容）:最内部的HTML元素的实际内容；
• padding（内边距）：直接包围内容，代表内间距；
• border（边框）：隔开内外边距；
• margin（外边距）：默认透明‘’

盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子成分分析

1.margin（外边距）

margin，盒子的外边框，他是完全透明的，可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• margin-top：上边距
• margin-buttom：下边距
• margin-left：左边距
• margin-right：右边距

也可以直接使用简写属性margin同时设置四条边的宽度。

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

设置auto代表依赖浏览器：

*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;

*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;

*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;

2. padding（内边距）

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• padding-top：上部填充
• padding-bottom：下部填充
• padding-left：左部填充
• padding-right：右部填充

也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似，可以参考margin的四个实例。

3.border（边框）

border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;

border-sytle属性可取值：

none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。

边界半径由属性border-radius进行控制，这是一个简写属性
边界半径可以使用 px、em 等长度单位，也可以使用百分数。
order-radius值的个数以及每个值对应控制的位置：

一个值：设置四个角有相同的边界半径；

。