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

显示 ( 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: none` 或 `visibility: hidden` 隐藏元素

虽然 display:none 和 visibility: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 动态修改「显示」和「可见性」的属性值，以实现更酷的布局效果

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

显示属性 display

可见性属性 visibility

使用 display: none 或 visibility: hidden 隐藏元素

显示属性 `display`

可见性属性 `visibility`

使用 `display: none` 或 `visibility: hidden` 隐藏元素