Skip to content

盒相关样式

每个 HTML 标签身上都附着有大量的属性，这些属性影响着标签在 Web 浏览器中的外观。有些属性，例如边框和背景色，裸眼立马就能看到。
而另一些则看不见，例如在标签的一边或多边添加空白的内外边距。
理解这些属性的工作方式之后，我们可以创建吸引人的分栏，修改侧边栏，还能控制两栏之间的间隔(设计师把这称为空白)，让网页看起来更有序、更明快，也更专业。

理解盒模型

说到段落或标题，你或许会想到字母、词语和句子；说到<img>标签，你或许会想到照片，徽标或其他图片。
可是，Web 浏览器把这些标签(所有标签)看成一个个小盒子。对浏览器来说，标签就是盛放东西的盒子，里面有文本、图像或包含其他内容的其他标签，如图 7-1 所示:

图7-1CSS盒模型

图7-1 CSS盒模型包括标签里的内容(例如几个句子)，内边距，边框和外边距。边框以内的区域，即内容和内边距，还可以有背景色。
其实，背景色在边框的下层绘制；因此，把边框线设为虚线或点划线时，透过虚线或点划线中的间隙能看到背景色。

盒子中内容的四周由不同的属性装饰:

  • padding: 内边距，即内容与边框之间的间隔。内边距相当于把照片与边框隔开的那部分空间
  • border: 边框，即盒子四周的边线。盒子四周都可以有边框，也可以只有一边有，或者其他几边有
  • background-color: 背景色，填充边框以内的空白，包括内边距部分
  • margin: 外边距，把两个标签隔开。例如，网页中的段落上下文通常都有空白，这就是外边距

任意一个标签都可以使用上述属性中的任何一个，或者多个，也可以全部使用。
我们可以为某个标签设定外边距，可以设定边框、外边距和内边距，也可以设定边框和外边距，而不设定内边距等。
如果不设置这些属性，会采用浏览器预设的值，而我们可能不喜欢预设值。例如，浏览器通常可能不会为所有标签都设置内边距或边框，可是会为某些标签(如标题和段落)预设上下外边距。

使用内外边距控制空白

外边距和内边距都能在内容四周添加空白。我们可以使用这两个属性把两个元素隔开，例如，在左边的导航目录与右边的主内容之间添加空白，也可以在内容与边框之间插入空白，例如把照片和边线隔开(见图 7-2)

图7-2添加空白

图7-2 在这个页面中，每张照片的外边距都是 10 像素，所以两张照片之间的间隔是 20 像素。内边距把图像和边框隔开，我们还设置了灰色的背景。
每一边的边框、外边距和内边距都可以单独设定。注意，每张照片的底部的内边距都大一些。

外边距冲突

在 CSS 中，2 加 2 并不总等于 4. 如果一个元素的下外边距触及另一个元素的上外边距，会遇到一些怪异的数学问题。
Web 浏览器不会把这两个外边距加在一起，而是取较大的一个(如图7-3上部)。
假设有个无序列表的下外边距是 30 像素，这个列表后面有个段落，段落的上外边距是 20 像素。
那么，Web 浏览器在二者之间添加空白时不会把两个值相加得到 50 像素，而是取较大的外边距，在此例中是 30 像素。如果不希望出现这种情况，要使用上下内边距(如图 7-3 下部)

图7-3外边距冲突

图7-3 两个纵向外边距相遇时，较小的那个会折叠。虽然上部那个标题的下外边距是 20 像素，随后那个段落的上外边距是 15 像素，但是 Web 浏览器在二者之间添加的空白高度是 20 像素。
如果想添加 35 像素高的空白，应该把外边距换成内边距，如图中下部那么标题所示。这个标题的下内边距是 20 像素。
这 20 像素会与随后那个段落 15 像素高的上外边距相加，得到 35 像素高的空白

遇到嵌套的元素时更怪异，会让你直挠头。比如说我们要在页面中添加一个“警告”文本框(例如把警告消息放在一个<div>标签里)。
我们在这个文本框上下添加 20 像素高的外边距，与上面的标题和下面的段落隔开。现在还没什么问题。

可是，如果在警告文本框中插入一个标题，想让这个标题与外层的<div>标签上下相距一点距离，因此把标题的外边距设为 10 像素。
你以为这样做会在标题与外层的<div>标签之间添加 10 像素高的空白，其实不然(如图 7-4 上部)，外边距会出现在那个<div>标签的上部。
在此例中，不管把标题的外边距设为多大，都会出现在那个<div>标签的上部。

注意: 用 CSS 的术语来说，这种现象称为“外边距折叠”，表示两个外边距会合在一起。

这个问题有两种解决方法: 其一，为<div>标签稍微设定一些内边距；其二，为<div>标签添加边框。
因为两个外边距之间有边框或内边距，因此不再相连，这样标题周围会出现一些空白(如图 7-4 下部)

注意: 横向的外边距和两个浮动元素之间的外边距不会像这样折叠。绝对定位和相对定位的元素也不会折叠外边距

图7-4外边距折叠

图7-4 蝙蝠侠，小心外边距变小了！上部：只要纵向外边距相连，就算是嵌套的元素(例如<div>标签里的<h2>标签)，外边距也会折叠。
下部: 为了解决这个问题，可以为外层元素添加一点内边距或边框(本例在<div>标签上下添加了 1 像素高的内边距)

把外边距设为负值，去掉空白

CSS 中的大多数尺寸都要使用正值，试想，文本怎么可能是-20像素高呢？内边距的值也要使用正值。
不过，CSS 允许把外边距设为负值，通过这种方式能实现很多创意性设计。

把外边距设为负值的作用不是在两个标签之间添加空白，而是去掉空白。
因此，可以让一个段落叠加在一个标题上，从外层元素(侧边栏或者其他用于布局的<div>元素)中突出来，甚至还能隐藏到浏览器窗口的某一边。
除此之外，把外边距设为负值还能做些有意义的事。

即便把两个标题的外边距都设为 0，标题之间仍有少量的空杯(因为有行高)。一般来说这点空白是有必要存在的，因为挤在一起的句子难以阅读。
不过，适度把两个标题挤在一起可以实现一些有趣的效果。图 7-5 中的第二个标题(以 "Raise Tuna" 开头的那个)，其上边距是 -10像素。
因此，这个标题会向上移动 10 像素，稍微与上面那个标题所占的空间重叠。而且，"Extra!Extra" 标题的左右边框触到了下面大标题中的字母。

把外边距设为负值还能模拟负的内边距。
图 7-5 中的第三个标题，即以 "The Extraordinary Technique" 开头的那个，下面有一条线。这条线其实是后面那个段落的上边框。
因为那个段落的上外边框为负值，所以边框向上移，到了标题下面。注意，字母 Q 的尾巴在边框下面。
因为内边框(内容，如字母 Q，与边框之间的距离)不能设为负值，所以不能把下边框向上移动，叠加到文本或其他内容上。
可是，我们可以为后面的元素添加边框，再把外边距设为负值，把后面的元素向上移动，以此实现相同的效果。

图7-5外边距设为负值

图7-5 在这个例子中，为了让最后一个段落的上边距看起来像是上面那个标题的下边距，要为那个段落设定一点内边距。
我们把段落的上内边距设为 5 像素，把段落向下移。还把段落的左内边距设为 4em，向右缩进整个段落。不过，上边框仍然延伸到最左边。

提示：其实，可以把那个段落的上外边距设为负值，或者把那个标题的下外边距设为负值。这两种方式都能让那个段落向上移动，靠近前面的标题。

行内，块级和其他显示方式

Web 浏览器把所有标签都当作盒子处理，可是处理方式却不同。
在 CSS 中，盒子分为两种(块级盒子和行内盒子)，分别对应于两种标签(块级标签和行内标签)

块级标签的前后都有换行。例如，<p>标签创建的是块级盒子，与前后的标签是隔开的。标题、<div>标签、表格、列表和列表项目都是块级标签。

行内标签的前后没有换行，与周围的内容和标签显示在同一行。
<strong>标签是行内标签，其中的内容与其他文本，即便是其他行内标签(如<em>)里的文本融洽相连。
其实，如果使用<strong>标签强调段落里的某个词，而这个词单独显示在一行，这样特别奇怪。
其他行内标签有: 添加图像的<img>标签，创建链接的<a>标签，以及创建表单字段的各个标签。

大多数情况下，CSS 不会区别对待行内盒子和块级盒子。两种盒子都能设定字体、颜色、背景和边框。不过，涉及到内外边距时，浏览器会使用不同的方式处理行内盒子。
我们可以使用左右内外边距在行内元素的左右添加空白，但是不可以使用上下外边距增加行内元素的高度。
在图7-6中，第一个段落里的那个行内元素有边框、背景色，而且四边都设置了 20 像素的外边距。可是，浏览器只会在那个行内元素的左右两边添加空白。

注意： 为行内元素设定内外边距不会导致元素变高，这条规则有个例外 -- <img>标签(虽然这是行内标签)。Web 浏览器会根据设定的内外边距相应地增加图像盒子的高度。

有时，我们可能想让行内元素表现得更像是块级元素，或者反过来。无序列表中的每个项目都是块级元素，从上而下显示。
有时可能想改变这种行为，让列表项目并排显示在一行里，例如导航栏中。或者让插入段落里的图像单独显示在一行，在图像上下添加空白。

幸好，CSS 提供了这种属性 -- display 属性。使用这个属性可以让块级元素表现得像行内元素: 

1
display: inline;

也可以让行内元素(如图像或链接)表现得像块级元素: 

1
display: block;

除此之外，还能让元素既像块级元素，又像行内元素。设为 inline-block 时，元素与周围的标签并排显示，不过仍能设置上下内外边距和高度: 

1
display: inline-block;

图7-6为行内元素添加上下内外边距

图7-6 为行内元素添加上下内外边距不能增加它的高度，因此可能会得到怪异的格式。
在中间那个段落里，链接的背景和边框与上下文本重叠了。链接的背景在前一行之上，却在后一行之下，这是因为浏览器把各行看成一行行叠加的对战。正常情况下，这不是问题，因为各行之间通常不会重叠。
如果想让行内元素的上下内外边距起作用，可以使用display: inline-block指令(图中下部)。这样，元素仍是行内元素，可是却视作块级盒子，所以内边距、外边距、边框、宽度和高度都能设定(并遵循相应的规则)。

注意: display 属性可以设为很多值，但不是所有浏览器都支持。inline-block 可以在现代浏览器中使用。
另一个值, none，可以在大多数浏览器中使用，用途广泛。这个值的作用只有一个 -- 完全隐藏目标元素，不显示在浏览器窗口中。
使用简单的 JavaScript 代码，把 display 属性改为 inline 或 block，能让使用这种方式隐藏的元素立即显示出来。
如果元素的 display 属性为 none，甚至还能使用 CSS 让它立即显示出来。

添加边框

边框就是元素四周的边线。边框位于内边距和外边距之间。四边的边框连在一起可以把图像框在其中，或者用于标识横幅或页面中其他元素的边界。
不过，边框不一定要围住整个内容。我们可以在四边都添加边框，也可以只在下边添加边框，或者在其他几边添加。边框使用起来很灵活，可以实现不像是边框的设计。
例如，在元素左边添加边框，把宽度设为 1em，看起来像是方形项目符号；
在段落下边添加边框，作用相当于<hr>标签(水平线)，从视觉上把页面中的两部分隔开。

边框有三个属性可以控制: color(颜色)、width(宽度)和 style(式样)

边框的式样控制绘制线条的类型。式样有很多种，如图 7-7 所示。式样使用关键字指定。
例如，solid 绘制的是实线，dashed 绘制的是虚线。CSS 提供的式样有: solid，dotted, dashed, double, groove, ridge, inset, outset, none 和 hidden(none 和 hidden 的作用一样，去掉边框. none 常用于去掉某一边的边框)

图7-7CSS提供的边框式样

图7-7 CSS提供了九种边框式样。实线是最朴素的，如果想实现其他视觉效果，可以使用点划线或虚线，或者使用 groove、ridge、inset 或 outset 模拟 3D 效果。
每一边的边框式样甚至可以单独设置，例如，让上边框使用实线，其他三边使用点划线

边框属性的简写形式

如果见过 CSS 中这些不同的边框属性，可能觉得边框特别复杂。毕竟，有 20 种之多。不过，这些属性都是同一主题的不同表示方式，用于控制四个边相同的三个属性: 颜色、宽度和式样。
最基本也最简单的属性是 border，在四边添加边框: 

1
border: 4px solid rgb(255, 0, 0);

上述指令添加 4 像素宽的实线边框。我们可以使用这个属性为照片、导航栏或其他想自成一体的盒子添加边框。

注意: 各属性的书写顺序无关紧要，可以写成border: 4px solid rgb(255,0,0);, 也可以写成border: rgb(255,0,0) solid 4px;

分别装饰各边的边框

我们可以使用相应的属性分别控制各边的边框: border-top, border-bottom, border-left 或 border-right。
这四个属性的作用与常规的 border 属性一样，不过只控制一边。下述属性声明在元素下面添加一条 2 像素宽的红色虚线: 

1
border-bottom: 2px dashed red;

我们可以使用 border 属性设定元素的所有边框，然后使用针对某一边的属性，如 border-left，调整那一边的边框。
比如说，我们想让某个段落的上边和左右两边使用相同的边框，而让下边的边框稍微不同，那么可以编写下述 4 行 CSS 代码: 

1
2
3
4
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 4px dashed #333;

或者，也可以使用下述两行 CSS 代码实线相同的效果: 

1
2
border: 2px solid black;
border-bottom: 4px dashed #333;

第一行代码定义全部四边边框的基本外观，第二行重新定义下边框的外观。这样写不仅省了两行代码，而且也易于修改样式。
如果想把上边和左右两边边框的颜色改为红色，只需修改一行代码，而不用修改三行: 

1
2
border: 2px solid red;
border-bottom: 4px dashed #333;

在这种简写形式中，如果把某一边的边框设为关键字 none，能把那一边的边框去掉。

添加背景色

创建圆角

添加投影

确定高度和狂赌

把内容放在浮动元素里

教程:边距，背景和边框

盒的类型

盒的基本类型

在 CSS 中，使用 display 属性来定义盒的类型。总体来说，CSS 中的盒分为 block 类型与 inline 类型。

例如，div 元素与 p 元素属于 block 类型，spane 元素与 a 元素属于 inline 类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 block 类型与 inline 类型进行对比的示例</title>
<style>
  div {
    background-color: #aaff00;
  }
  span {
    background-color: #ffaa00;
  }
</style>
<div>div 元素</div>
<div>div 元素</div>
<span>span 元素</span>
<span>span 元素</span>

div 元素所代表的 block 类型的元素的宽度占满了整个浏览器的宽度，而 span 元素所代表的 inline 类型的元素的宽度只等于其内容所在的宽度。另外，每一行中只允许容纳一个 block 类型的元素，但是可以并列容纳多个 inline 类型的元素

在样式代码中如果使用 display 属性，可以将 div 元素与 span 元素的类型进行互换，将 div 元素变成 inline 类型的元素，将 span 元素变成 block 类型的元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 block 类型与 inline 类型进行对比的示例</title>
<style>
  div {
    display: inline;
    background-color: #aaff00;
  }
  span {
    display: block;
    background-color: #ffaa00;
  }
</style>
<div>div 元素</div>
<div>div 元素</div>
<span>span 元素</span>
<span>span 元素</span>

inline-block 类型

inline-block 类型盒属于 block 类型盒的一种，但是在显示时具有 inline 类型盒的特点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>inline-block 类型 div 元素的示例</title>
<style>
  div.inlineblock {
    display: inline-block;
    background-color: #00aaff;
    height: 100px;
  }
  div.inline {
    display: inline;
    background-color: #aaff00;
    height: 100px; /* 无效 */
  }
</style>
<div>
  <div class="inlineblock">inline-block 类型</div>
  <div class="inlineblock">inline-block 类型</div>
</div>
<div>
  <div class="inline">inline 类型</div>
  <div class="inline">inline 类型</div>
</div>

如果对 inline-block 类型的元素使用 width 属性或 height 属性，就能看出它与 inline 类型的元素的区别

使用 inline-block 类型来执行分列显示

如果需要在一行中并列显示多个 block 类型的元素，需要使用 float 属性或 position 属性，但这样会使样式变得比较复杂。inline-block 使得并列显示多个 block 类型元素的操作变得非常简单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 div 元素并列显示示例</title>
<style>
  div#a, div#b {
    width: 200px;
    float: left;
  }
  div#a {
    background-color: #0088ff;
  }
  div#b {
    background-color: #00ccff;
  }
  div#c {
    clear: both;
    width: 400px;
    background-color: #ffff00;
  }
</style>
<div id='a'>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div id='b'>B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div>
<div id='c'>C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C</div>

在该示例中，具有三个 block 类型的 div 元素，使用 float 类型将前两个 div 元素并列显示，将第三个 div 元素显示在前两个 div 元素的下部，因为前两个元素的高度不一致，所以对第三个元素使用 clear 属性去除环形围绕方式

但是，如果使用 inline-block 类型，可以直接将两个 div 元素进行并列显示，不需要使用 float 属性，同时也不需要去除环形围绕方式的 clear 属性了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 div 元素并列显示示例</title>
<style>
  div#a, div#b {
    width: 200px;
    display: inline-block;
  }
  div#a {
    background-color: #0088ff;
  }
  div#b {
    background-color: #00ccff;
  }
  div#c {
    width: 400px;
    background-color: #ffff00;
  }
</style>
<div id='a'>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div id='b'>B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div>
<div id='c'>C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C</div>

默认情况下使用 inline-block 类型时并列显示的元素的垂直对其方式时底部对齐，为了使垂直对齐方式改为顶部对齐，还需要在 div 元素的样式中加入 vertical-align 属性。另外，如果要让两个 div 元素当中没有缝隙，还需要去除代码中两个 div 元素之间的换行符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 div 元素并列显示示例</title>
<style>
  div#a, div#b {
    width: 200px;
    display: inline-block;
    vertical-align: top;
  }
  div#a {
    background-color: #0088ff;
  }
  div#b {
    background-color: #00ccff;
  }
  div#c {
    width: 400px;
    background-color: #ffff00;
  }
</style>
<div id='a'>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><div id='b'>B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div><div id='c'>C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C</div>

使用 inline-block 类型来显示水平菜单

在 CSS 2.1 之前，对于水平菜单的实现也需要使用 float 属性。在大多数情况下，水平菜单是利用 ul 列表与 li 列表项目来实现的，li 元素属于 block 类型下的 list-item 类型。因此，如果要让 li 元素并列显示，需要使用 float 属性

 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
<style>
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    width: 100px;
    padding: 10px 0;
    background-color: #00ccff;
    border: solid 1px #666666;
    text-align: center;
    float: left;
  }
  a {
    color: #000;
    text-decoration: none;
  }
</style>
<ul>
  <li><a href="#">菜单 1</a></li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
  <li><a href="#">菜单 4</a></li>
</ul>

使用 inline-block 类型同样可以实现水平菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    width: 100px;
    padding: 10px 0;
    background-color: #00ccff;
    border: solid 1px #666666;
    text-align: center;
  }
  a {
    color: #000;
    text-decoration: none;
  }
</style>
<ul>
  <li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li><li><a href="#">菜单 4</a></li>
</ul>

另外，还可以让 a 元素也属于 inline-block 类型，然后使用背景色，并且指定宽度，使 a 元素占据整个菜单。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    width: 100px;
    background-color: #00ccff;
    border: solid 1px #666666;
    text-align: center;
  }
  a {
    display: inline-block;
    background-color: #ffcc00;
    color: #000;
    width: 100px;
    padding: 10px 0;
    text-decoration: none;
  }
</style>
<ul>
  <li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li><li><a href="#">菜单 4</a></li>
</ul>

inline-table 类型

普通表格的前后的文字都处于不同的行中，因为 table 元素属于 block 类型，所以不能与其他文字处于同一行中，但是如果将 table 元素修改成 inline-table 类型，就可以让表格与其他文字处于同一行中

可以在样式中显示指定表格与文字的对齐方式

1
2
3
4
5
table {
  display: inline-table;
  border: solid 3px #00aaff;
  vertical-align: bottom;
}

list-tiem 类型

如果在 display 属性中将元素的类型设定为 list-item 类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记

1
2
3
4
5
div {
  display: list-item;
  list-style-type: circle;
  margin-left: 30px;
}

none 类型

将元素的类型指定为 none 类后，该元素将不会显示

1
2
3
.none {
  display: none;
}

对于盒中容纳不下的内容的显示

overflow 属性

将超出容纳范围的文字隐藏起来：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>将 div 元素并列显示示例</title>
<style>
  div {
    width: 300px;
    height: 150px;
    border: solid 1px orange;
    overflow: hidden;
  }
</style>
<div>
  <h1>标题文字</h1>
  <p>示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
  示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。</p>
  <p>示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
  示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。</p>
</div>

如果将 overflow 属性设定为 scroll，则 div 元素中将出现固定的水平滚动条与垂直滚动条，文字超出 div 元素的容纳范围时将被滚动显示

1
2
3
4
5
6
div {
  width: 300px;
  height: 150px;
  border: solid 1px orange;
  overflow: scroll;
}

如果将 overflow 属性的属性值设定为 auto，则当文字超出 div 元素的容纳范围时根据需要出现水平滚动条或垂直滚动条，并且滚动显示超出容纳范围的内容

1
2
3
4
5
6
div {
  width: 300px;
  height: 150px;
  border: solid 1px orange;
  overflow: auto;
}

如果将 overflow 属性的属性值设定为 visible，则与不使用 overflow 属性时的显示效果一样，超出容纳范围的文字按原样显示

overflow-x属性与overflow-y属性

1
2
3
4
5
6
7
div {
  width: 300px;
  height: 150px;
  border: solid 1px orange;
  overflow-x: hidden;
  overflow-y: scroll;
}

将 overflow-x 属性设定为 hidden，将 overflow-y 属性设定为 scroll，则只显示垂直方向上的滚动条

text-overflow属性

当通过把 overflow 属性的属性值设定为 "hidden" 的方法将盒中容纳不下的内容隐藏起来时，如果使用 text-overflow 属性，可以在盒的末尾显示一个代表省略的符号"..."。但是，text-overflow 属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
  div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    border: solid 1px orange;
  }
</style>
<div>
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>

通过将 white-space 属性值设定为 nowrap，使得盒的右端内容不能换行显示，这样一来，盒中的内容就在水平方向上溢出了

这时，如果在 div 元素的样式中加入 overflow 属性，并且指定 overflow 属性的属性值为 hidden，超出 div 元素部分的文字将会隐藏起来

如果在此基础上使用 text-overflow 属性，并且将属性设定为 ellipsis，则 div 元素的末尾会出现一个省略号