HTML5与CSS3基础教程:用CSS改变元素默认显示类型

摘要:使用CSS可以改变元素的默认显示类型,例如将block改为inline,或者反过来。还有一种混合显示方式称为inline-block,让元素与其他内容出现在同一行,同时具有块级元素的属性。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)
第四节:对默认样式进行重置或标准化(抹平不同浏览器之间的样式差异)

第五节:盒模型(用CSS分控制每一个盒模型)

11.6 控制元素的显示类型和可见性

正如第1章讲到的,每个元素在默认情况下要么显示在单独的行(如h1~h6、p等),要么显示在行内(如em、strong、cite等),如图11.6.1所示。第1章还提到,前一种元素称为块级元素,后一种称为行内元素(这是一种非官方的叫法)。

造成这种情况的本质是它们的display属性,即块级元素被设置为display: block(对于li元素为display: list-item),而行内元素被设置为display: inline。

当然,使用CSS可以改变元素的默认显示类型,例如将block改为inline(如图11.6.2所示),或者反过来(如图11.6.3所示)。还有一种混合显示方式称为inline-block,让元素与其他内容出现在同一行,同时具有块级元素的属性(如图11.6.4~图11.6.6所示)。还可以通过设置display属性让元素完全不在页面上显示(如图11.6.7所示)。

blob.png

图11.6.1 这些简单嵌套em元素的段落演示了display: block和display: inline的区别

blob.png

图11.6.2 两个段落看起来像一个段落

blob.png

图11.6.3 em元素显示在单独的行,就像段落一样

blob.png

图11.6.4 设置为inline的元素会忽略任何width、height、margin-top和margin-bottom设置。不过,设置为inline-block的元素可以使用这些属性,如这里的em可以设置width。因此,如果本例对em设置display: inline;,则会像

图11.6.1那样显示(除了背景色),无论是否对它指定width(所有的display类型都接受background样式。这里将em的背景设为浅绿色,是为了让em的宽度变得明显)

blob.png

图11.6.5 这里将主导航链接及其父元素列表项目设置为inline-block,从而方便为其添加上下内边距(参见11.8节)。社交网站图标(指这里的.social-sites li选择的元素)不需要添加块级元素才具有的样式,因此将它们设置为inline就够了

blob.png

图11.6.6 这里是一个演示display属性功能的实例。社交网站图标与主导航都包含在列表项目(li)里,因此,在默认情况下,它们从上往下排列(如左图所示)。将它们默认的display: list-item;覆盖后(如图11.6.5所示),每个链接列表中的元素都显示在一行内

blob.png

图11.6.7 em文字既不显示,也不占据任何视觉空间。在HTML中紧跟在它后面的文字会向左移动,完全无法察觉到em文字曾占据那个位置

blob.png

1. 指定元素的显示方式

(1) 在样式表规则中,输入display:。

(2) 输入block,让元素显示为块级元素(就像开始新的段落),参见图11.6.3;

或者输入inline,让元素显示为行内元素(不同于开始新的段落),参见图11.6.2;

或者输入inline-block,让元素显示为行内元素,同时具有块级元素的特征,即可以为元素的四条边设置width、height、margin、padding等属性,参见图11.6.4~图11.6.6;

或者输入none,隐藏元素,并将其从文档流中完全移除(参见图11.6.7)。

关于display属性的其他值,参见提示。

2. 控制元素可见性

visibility属性的主要目的是控制元素是否可见。与display属性不同的是,使用visibility隐藏元素时,元素及其内容应该出现的位置会留下一片空白区域(如图11.6.8所示)。隐藏元素的空白区域仍然会在文档流中占据位置。

(1) 在样式表规则中,输入visibility:。

(2) 输入hidden,让元素不可见,但在文档流中保留它(如图11.6.8所示);

或者输入visible,让元素显示出来。

blob.png

图11.6.8 隐藏的em文字所在的位置出现了一块空白,就像是将em文字设成了白色。空白的尺寸与文本(或者其他任何隐藏的内容)的大小完全

一致

提示:设置为display: inline;的元素不接受padding的设置,但padding-top和padding-bottom会越界进入相邻元素的区域,而不是局限于该元素本身的空间。可以对元素设置background: red;以作测试。

提示:第12章演示了一个针对窄屏(如手机屏幕)将行内元素设置为display: block;,针对宽屏(如桌面计算机的屏幕)改回display: inline;的实例。

提示:设置为display: none;或visibility: hidden;的元素里的所有内容(包括所有的后代)也会受到影响。例如,如果将一个包含一些p、figure和img元素的article元素设置为display: none;,则这些元素都不会显示出来。如果将article元素设置为visibility: hidden;,就会出现一片空白(很有可能是一大块空白)。

提示:display属性还有其他几个值,但浏览器对它们的支持程度是有差异的。例如,grid和flex属性提供了一些额外的布局技术,但它们还没有进入最终的规范。更多信息参见http://developer.mozilla.org/CSS/display。

提示:除了inherit,visibility属性还有一个值:collapse,用于table元素的部分内容。关于collapse的更多信息,参见http://developer.mozilla.org/CSS/visibility。