第十三章CSS盒子模型

1.”盒子”与”模型”的概念探究

如图所示

每一幅画都有一个边框，即border。画与边框之间有一定的边距，这个距离称为”内边距”即padding。画之间也有一定的距离，这个距离称为”外边框”，即margin。

padding-border-margin模型是一个极其通用的描述矩形对象的布局方法，这些矩形对象可以被统称为”盒子”，即Box。

在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。

上图中有一个顺时针旋转的箭头，当使用CSS这些部分设置宽度时，是按照顺时针方向对应关系。

2.边框（border）

border属性主要有3个，分别是color（颜色）、width（粗细）和style（样式）。

在使用CSS设置边框的时候，可以分别使用border-color、border-width和border-style设置它们。

其中border-color设置颜色。

接着border-width设置粗细程度，可以设为thin（细）、medium（适中）、thick（粗）和。其中<length表示具体数值。width默认值是medium，大部分浏览器都将其解析为2px。

最后border-style设置的是线的样式，它有none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset这些值、依次是”无”、”隐藏”、”点线”、”虚线”、”实线”、”双线”、”凹槽”、”突脊”、”内陷”和”外凸”。具体效果看如下列表：

2.1 设置边框演示（border-style）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框的样式</title>

<style type="text/css">

div{

border-width:6px;

border-color:#000000;

margin:20px;

padding:5px;

background-color:#FFFFCC;

}

</style>

</head>

<body>

<div style="border-style:dashed">The border-style of
dashed.</div>

<div style="border-style:dotted">The border-style of
dotted.</div>

<div style="border-style:double">The border-style of
double.</div>

<div style="border-style:groove">The border-style of
groove.</div>

<div style="border-style:hidden">The border-style of
hidden.</div>

<div style="border-style:inherit">The border-style of
inherit.</div>

<div style="border-style:inset">The border-style of inset.</div>

<div style="border-style:none">The border-style of none.</div>

<div style="border-style:outset">The border-style of
outset.</div>

<div style="border-style:ridge">The border-style of ridge.</div>

<div style="border-style:solid">The border-style of solid.</div>

</body>

</html>

其效果如下：

chrome对border-style支持不够理想。

firefox就可以把所有边框效果展示出来。

因此不推荐使用border-style来设置边框样式。

2.2 属性值的简写形式

1）对不同边框设置不同的属性值。

两个值分别设置上下、左右边框。

三个值设置上、左右、下边框。

四个值设置上、右、下、左这个顺序的边框。

2）一行中同时设置边框的宽度、颜色和样式

例如：

依次是width、color和style

3）对一条边框设置于其他边框不同的属性

例如：

先设置边框为2像素的绿色虚线，然后单独设置左边框为1像素的红色实线。

4）同时制定一条边框的一种属性

例如：

5）实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>不同的边框</title>

<style type="text/css">

#outerBox{

width:200px;

height:100px;

border:2px black solid;

border-left:4px green dashed;

border-color:red gray orange blue;

border-right-color:purple;

}

</style>

</head>

<body>

</body>

<div id="outerBox"></div>

</html>

效果如下：

2.3 边框与背景

注意：IE中background-color背景颜色的作用域为content+padding，而Firefox则是content+padding+border。

将如下代码放入两个浏览器中

可以看到

3.设置内边距

内边距padding也可以设置四个值，与上面类似。

4.设置外边距

给四个边框设置20像素的效果

5.盒子之间的关系

5.1 DOM

DOM是Document Object
Model的缩写，即”文档对象模型”。一个网页的所有元素组织在一起，就构成了一棵”DOM树”。

如下的一张网页

在Firefox中打开DOM查看器，会看到。

可以看出DOM树与盒子模型的关系

5.2 标准文档流

简称”标准流”，即没有进行任何CSS样式设置，网页所自然呈现的状态。

网页的中元素大致可分为两种：

1）块级元素（block level）

像、

    这些，以一个块的形式表现出来的就是块级元素。

    2）行内元素（inline）

    没有区域，只是指定某几个字，也不会自动换行，像这一些的。

    5.3

    标记和标记

    1)

    与其他块级元素的区别。

      也是一个块级元素，与
      不同的是，ul是一个具有特殊含义的块级元素，有一定的逻辑语义，而div是一个通用的块级元素，可以容纳任何元素，从而方便排版。

      2）

      与的区别

      包含的元素会自动换行，而仅仅是一个行内元素，它的前后不会换行。

      其结果如下

      6.盒子在标准流中的定位原则

      如果要精确地控制盒子的位置，就必须对margin有更深入的了解。

      6.1 行内元素之间的水平margin

      当两个元素相邻时，它们的距离为margin-right+margin-left

      两个块之间的距离为30+40=70px

      6.2 块级元素之间的竖直margin

      两个块级元素上下相邻时，它们的距离是取margin-bottom与margin-top中较大的一个。

      这里两个元素之间的距离是50px，当margin-top修改为40px时，位置不变，margin-top修改为60px时，两个元素之间的距离增大了10px。

      6.3 嵌套盒子之间的margin

      标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直至上一级盒子限制的位置。

      6.4 margin属性可以设置为负值

      当设置为负值时，两个元素相互重叠。