CSS 中的 display 和 visibility

CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。

display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。
visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。

display 属性

属性值	描述
none	此元素不会被显示。

当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。

在 HTML 页面中定义两个

标签，并设置 CSS 样式，具体代码如下:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    style>
  head>
  <body>
    <div id="d1">div>
    <div id="d2">div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

当为第一个

标签设置 display 属性值为 none 时，该

标签会被隐藏。

属性值	描述
block	此元素将显示为块级元素。

该值主要作用于内联元素。如果将内联元素的 CSS 属性 display 设置为 block 时，该内联元素将在浏览器中显示成块级元素效果。

在 HTML 页面中定义两个

标签，并设置 CSS 样式，具体代码如下:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <style>
      #s1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #s2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    style>
  head>
  <body>
    <span id="s1">这是一个spanspan>
    <span id="s2">这是一个spanspan>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

当为第一个标签设置 display 属性值为 block 时，该标签会呈现块级元素效果。

属性值	描述
inline	默认值，此元素会被显示为内联元素。

该值主要作用于块级元素。如果将内联元素的 CSS 属性 display 设置为 inline 时，该内联元素将在浏览器中显示成内联元素效果。

在 HTML 页面中定义两个

标签，并设置 CSS 样式，具体代码如下:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    style>
  head>
  <body>
    <div id="d1">这是一个divdiv>
    <div id="d2">这是一个divdiv>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

当为第一个

标签设置 display 属性值为 inline 时，该

标签会呈现内联元素样式。

属性值	描述
inline-block	行内块元素。

当将 CSS 属性 display 设置为 inline-block 时，该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果，元素之间呈现内联元素效果。

在 HTML 页面中定义两个

标签，并设置 CSS 样式，具体代码如下:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    style>
  head>
  <body>
    <div id="d1">这是一个divdiv>
    <div id="d2">这是一个divdiv>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

分别为两个

标签设置 display 属性值为 inline-block 时，这两个

会显示在一行中。

visibility 属性

visibility 属性指定一个元素是否是可见的。

值得注意的是: visibility 属性设置元素不可见的元素，但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。

属性值	描述
visible	默认值，元素是可见的。
hidden	元素是不可见的。

在 HTML 页面中定义两个

标签，并设置 CSS 样式，具体代码如下:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    style>
  head>
  <body>
    <div id="d1">这是一个divdiv>
    <div id="d2">这是一个divdiv>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

当为第一个

标签设置 visibility 属性值为 hidden 时，该

会被隐藏。

相关阅读:
LeetCode刷题：27. 移除元素
 liunx 运行jmeter脚本jmx
Python中的两种排序方法：sort()和sorted()
从GitHub火到了CSDN，共计1658页的《Java岗面试核心MCA版》，拿走不谢
 为人物化身持有者打造的 Alpha 第 3 季特别活动
 开发神技！阿里消息中间件进阶手册限时开源，请接住我的下巴
 子组件自定义事件$emit实现新页面弹窗关闭之后父界面刷新
 wvp-gb28181-pro存在的问题
 mysql什么时候会发生file sort
【数据结构】数组和字符串（四）：特殊矩阵的压缩存储：稀疏矩阵——三元组表
原文地址：https://blog.csdn.net/DeepLearning_/article/details/132713462