CSS 简明教程 - 显示和可见属性

yufei       5 年, 8 月 前       901

显示 ( display ) 和可见性 ( visibility ) 属性是 CSS 布局中两个非常重要的属性, 它们主要用于控制元素的显示

显示属性 display

display 属性确定元素的显示方式

每个 HTML 元素都有一个默认显示值,大多数元素的默认显示值是块 block 或内联 inline

一般来说,HTML 块级元素的默认显示值是块,HTML 内联元素的默认显示值是内联的,有关所有块级元素和内联元素的列表,可以访问 这里

当然,我们也可以更改元素的默认显示值

例如,可以将 <li> 元素的 display 属性值设置为 inline 以实现水平菜单

li {
    display: inline;
}

我们还可以设置 <span> 元素的 display 属性为 block ,同时指定宽度和高度

span {
    display: block;
    width: 80px;
    height: 50px;
}

注意:设置元素的 display 属性只会改变元素的显示方式,并不会更改元素本身的类型

如果希望某个元素从页面中消失,可以将其 display 属性设置为 none

p.none {
    display: none;
}

可见性属性 visibility

visibility 属性可以更改页面中元素的可见性

例如下面的代码,我们将第二个 <p> 元素的 visibility 属性设置为隐藏

<html>
   <head>
        <meta charset="utf-8" />
   </head>
   <body>
      <p>一情况下,这个段落是可见的</p>

      <p style="visibility: hidden;">
      这个段落是不可见的,但位置还是空出来了
      </p>

      <p>一情况下,这个段落是可见的</p>
   </body>
</html>

你会看到第二段的文字消失了。 但是,该页面仍保留该段落的布局空间

使用 display: nonevisibility: hidden 隐藏元素

虽然 display:nonevisibility:hidden 属性都可以用来隐藏元素,但它们之间是有区别的:

  • display:none 用于隐藏元素,不为它们保留布局空间
  • visibility:hidden 用于隐藏元素并为它们保留布局空间
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8" />
   </head>
   <body>
      <p>该段落会以正常的方式显示</p>

      <p style="visibility: hidden;">该段落是不可见的,但是仍会保留原来的布局空间</p>

      <p>前一个段落不可见,但仍会保留原来的布局空间</p>

      <p style="display: none;">该段落是不可见的</p>

      <p>前一个段落不可见,也不会为其保留布局空间</p>
   </body>
</html>

我们还可以使用 JavaScript 动态修改 「 显示 」 和 「 可见性 」 的属性值,以实现更酷的布局效果

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.