六、CSS之标准盒模型

HTML、CSS基础课程系列 CSS

CSS之标准盒模型

盒模型是网页布局的基础 ——每个元素被表示为一个矩形的盒子,盒子的内容、内边距、边框和外边距像洋葱的膜那样,一层包着一层构建起来。浏览器渲染网页布局时,它会算出每个盒子的内容要用什么样式,周围的洋葱层有多大,以及盒子相对于其它盒子放在哪里。在理解如何创建 CSS 布局之前,你需要理解盒模型——这就是本文中我们将要学习的内容。

盒子属性

首先,我们使用一副平面图来理解盒子模型都有那些属性:

widthheight

width宽度和height高度是设置内容盒(content box)的宽度和高度,内容盒是盒子内容显示的文本区域以及它内部的子元素区域。注意,css中还有一些其他属性来处理内容的高度和高度,比如max-heightmin-width等。

margin

外边距(margin)是盒子的外部区域,它表示盒子与盒子之间的距离,它有margin-topmargin-rightmargin-bottommargin-left四个值,分别代表上边距、右边距、下边距和左边距。它也可以简写为margin,分别有以下几种情况:

  • 1个值,代表四周都有margin。
  • 2个值,分别代表上下、左右。
  • 3个值,分别代表上、左右、下。
  • 4个值,分别代表上、右、下、左,可以记忆为顺时针。

注意,外边距有个特殊的行为,叫做外边距塌陷(margin collapsing):当两个盒子接触时,他们的间距取两个相邻边框的最大值,而不是两者的总和。

padding

内边距(padding)是盒子的位于内容盒与边框之间的区域,它通常影响元素内部的文本,与margin类似,也有padding-toppadding-rightpadding-bottompadding-left这四个单个属性,也可以简写为padding,有多少个值也与margin一致。

border

边框(border)是一个分隔层,位于内边距和外边距之间。它有以下几种属性:

  • 边框的方位,分别有border-topborder-rightborder-bottomborder-left四个值。
  • 边框的宽度,border-width
  • 边框的样式,border-style,比如有实线solid、虚线dashed等。
  • 边框的颜色,border-color

当然border也可以简写,比如

1
border:1px solid black;

代表四周的边框宽度为1像素,实线,黑色的颜色。有时候也可以单独设置一个边框的不同属性,比如border-top-widthborder-top-styleborder-top-color等。

参考下面三维立体盒模型,

内容溢出

当你给盒子设置了固定的高和宽,有时候盒子里面的内容过多的话会导致溢出,为了控制这种情况,我们会使用overflow,它有以下几个值:

  • auto,如果内容过多,则显示出滚动条,让用户滚动查看所有内容。
  • hidden,如果内容过多,则隐藏掉溢出的内容。
  • visible,这是默认值,如果内容过多,则显示出溢出的内容。

举个例子,

1
2
3
4
5
6
7
8
9
<p class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus in doloremque dicta amet dolore, a est repellat, odit deleniti! Nostrum accusantium id vel nesciunt totam, velit ad odit modi voluptates?
</p>
<p class="hidden">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus in doloremque dicta amet dolore, a est repellat, odit deleniti! Nostrum accusantium id vel nesciunt totam, velit ad odit modi voluptates?
</p>
<p class="visible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus in doloremque dicta amet dolore, a est repellat, odit deleniti! Nostrum accusantium id vel nesciunt totam, velit ad odit modi voluptates?
</p>

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
p{
width:400px;
height:300px;
padding:10px;
border:1px solid black;
}
.auto{
overflow:auto;
}
.hidden{
overflow:hidden;
}
.visible{
overflow:visible;
}
```
三个段落,分别表现如下图:
![](/images/overflow.png)
## margin折叠的解决办法
盒子的垂直方向的外边距有时候被组合成单个外边距,其大小是取组合中的最大值,这种行为叫做外边距塌陷(*margin collapsing*),也叫**margin折叠**,举个例子:
```html
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box1{
width: 300px;
height:200px;
background-color: red;
margin:20px 0;
}
.box2{
width:200px;
height:100px;
background-color: blue;
margin:10px 0;
}
.box3{
width:400px;
height:200px;
background-color: green;
margin:30px 0;
}

通过这个例子可以看出,box1和box2发生的margin折叠,box1和box3也发生了margin折叠,现在我们分别来分析这两种情况:

父元素与第一个子元素的margin折叠

上面的box1与box2属于这种情况,有以下解决方案:

  • 给父元素设置overflow:hidden或overflow:auto。(推荐)
  • 给父元素添加值不为0的border。
  • 设置父元素的padding-top。
  • 子元素或父元素浮动。
  • 给父元素设置display为inline-block
  • 给父元素设置为绝对定位。

相邻兄弟元素的margin折叠

上面的box1与box3属于这种情况,有以下解决方案:

  • 给后面的元素设置浮动。
  • 给后面的元素设置display为inline-block

小结

这节课我们学习了css盒模型的一些概念,了解了框的一些工作原理,接下来我们会继续研究css常用的一些属性,比如背景。

作业

①. 测试这节课学习的所有关于盒模型的一些属性。

②. 分别测试margin折叠的几种解决方案,以及每种方案的效果。

③. 完成小米商城登录页面。

教材编写 myxxqy@gmail.com 张超
2017.07.17