揭秘CSS(第 1 版)
4.8.4 元素的display属性
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

盒尺寸

处理溢出

框的生成

匿名文本和匿名框

行内级元素和行内框

块级元素和块框

元素的display属性

使用 display属性,可以改变一个框的显示类型,显示类型就决定了一个元素生成框的类型,同时也会影响一个框的行为。

可以把行内元素的 display属性设置为 block,它将生成一个块级框,并表现得像块级元素一样。并且,浏览器会把它作为一个块级框来摆放,它会独占一行,并且可以像处理 div 一样设置样式,如设置其宽度、高度、垂直外边距、垂直内边距。比如,把链接元素 a 的 display属性设置为 block,则整个元素都会成为链接的一部分,用户的鼠标指针停留在元素框的任何位置,都能激活这个链接。

同样,也可以把行内元素的 display属性设置为 inline,让它成为行内元素,此时,width、height 等属性将失效。

不过,需要注意的是,display属性只能改变元素的显示角色,而没有改变一个元素的本质。换句话说,可以让一个段落生成行内框,但并不能让这个段落元素真正变成一个行内元素。行内元素可以是一个块级元素的后代,反过来则不行。

在CSS2.1中,还可以把一个元素的 display属性设置为 inline-block,让它生成一个行内级框,它同时具有块级框和行内框的特征,它像行内框一样在行内水平依次排列,但仍然可以向块级框的一样设置样式,如设置宽度、高度、垂直内边距、垂直外边距。如果未定义行内块的 width 属性,元素框收缩以适应内容。也就是说,元素框的宽度刚好足够包含其内容,而没有多余的空间。

也可以把元素的 display属性设置为 none,让元素根本没有框,这样的话,该框及其所有内容就不再显示,也不占据文档中的空间。

还可以通过 visibility 属性设置元素的可见性。设置为 visible 时,让对象可见;设置为 hidden 时,把对象隐藏,让其不可见。

说明:display:none 与 visibility:hidden的区别

当为一个元素设置 display: none 或 visibility: hidden时,元素都不会被显示在页面上,但它们之间却有本质上的区别。

display: none 的元素,会不留痕迹的从页面上消失,也不占用页面上的空间;而 visibility: hidden 的元素,则只是阻止浏览器显示其内容,让其不可见而已,它在页面上占据的空间依然会保留,会在原来的位置留下一个洞。

对于绝对定位的元素而言,它已经脱离文档流,display: none 和 visibility: hidden 的效果是一样的。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验