CSS元素的显示与可见性（详解Display和Visibility的用法）

一、介绍

1.Display:

1.1.概念:

1.2.特点:

1.3.用法:

1.4.应用:

1.5.功能:

2.Visibility:

2.1.概念:

2.2.特点:

2.3.用法:

2.4.应用:

2.5.功能:

总结：

二、使用

1.隐藏元素- display:none或visibility:hidden

2.Display - 块和内联元素

3.如何改变一个元素显示

4.display和visility属性

4.1Display:

4.2Visibility:

三、应用实例

1.使用display和visibility实现响应式菜单

2.使用visibility实现模态框

3.使用display和flex实现响应式网格布局

4.使用visibility和transition实现平滑的元素过渡效果

四、总结

一、介绍

1.Display:

1.1.概念:

display属性用于定义元素的布局模式，即元素如何在页面中呈现。

1.2.特点:

它有多种取值，每种取值对应不同的布局方式，如block、inline、inline-block、flex、grid等。

1.3.用法:

display: block;使元素以块级元素显示，占据一行。

display: inline;使元素以行内元素显示，与其他行内元素在同一行内。

display: inline-block;结合了块级元素和行内元素的特性，即可以设置宽高，同时又可以在同一行内显示。

display: flex;创建一个弹性盒子，使元素可以灵活布局。

display: grid;创建一个网格容器，使元素可以以网格形式布局。

1.4.应用:

用于控制元素的布局方式，根据设计需求选择不同的display值。

1.5.功能:

控制元素的显示方式，影响元素的盒模型、位置和大小等。

2.Visibility:

2.1.概念:

visibility属性用于控制元素的可见性，即元素是否可见。

2.2.特点:

它有两种取值，visible和hidden，分别表示元素可见和不可见。

2.3.用法:

visibility: visible;使元素可见。

visibility: hidden;使元素不可见，但仍占据页面布局空间。

2.4.应用:

用于控制元素在页面中的可见性，常用于实现动态显示和隐藏效果。

2.5.功能:

控制元素的可见性，但不影响元素的布局。

总结：

Display主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。
Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。

二、使用

1.隐藏元素- display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

2.Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

3.如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

4.display和visility属性

4.1Display:

selector {
    display: value;
}

selector: 要应用样式的HTML元素选择器。
value: 布局方式的取值，如block、inline、inline-block、flex、grid等。

4.2Visibility:

selector {
    visibility: value;
}

selector: 要应用样式的HTML元素选择器。
value: 可见性的取值，可以是visible（可见）或hidden（不可见）。

三、应用实例

1.使用`display`和`visibility`实现响应式菜单

HTML:

<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<button id="toggleMenu">Toggle Menu</button>

CSS:

#menu {
    display: none; /* 初始时菜单隐藏 */
}

#menu.visible {
    display: block; /* 显示菜单 */
}

/* 其他样式 */

JavaScript:

document.getElementById("toggleMenu").addEventListener("click", function() {
    var menu = document.getElementById("menu");
    menu.classList.toggle("visible");
});

演示了如何通过JavaScript来控制菜单的显示和隐藏，使用display: none;和display: block;来实现。当按钮被点击时，菜单的可见性会切换。

2.使用`visibility`实现模态框

HTML:

<div id="modal" style="visibility: hidden;">
    <div id="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
        <button id="closeModal">Close</button>
    </div>
</div>

<button id="openModal">Open Modal</button>

CSS:

#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 其他样式 */

JavaScript:

document.getElementById("openModal").addEventListener("click", function() {
    var modal = document.getElementById("modal");
    modal.style.visibility = "visible";
});

document.getElementById("closeModal").addEventListener("click", function() {
    var modal = document.getElementById("modal");
    modal.style.visibility = "hidden";
});

实例演示了如何使用visibility属性创建一个简单的模态框。点击按钮打开模态框，点击模态框内的关闭按钮关闭模态框。

3.使用`display`和`flex`实现响应式网格布局

HTML:

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
</div>

CSS:

.grid-container {
    display: flex;
    flex-wrap: wrap;
}

.grid-item {
    flex: 1 0 200px; /* 每个网格项最小宽度200px */
    background-color: lightblue;
    margin: 10px;
}

这个实例演示了如何使用display: flex;和flex-wrap: wrap;创建一个响应式的网格布局。网格项会根据容器宽度自动换行。

4.使用`visibility`和`transition`实现平滑的元素过渡效果

HTML:

<div id="element" class="hidden">Hover Me</div>

CSS:

#element {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: visibility 0.3s ease; /* 平滑过渡效果 */
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

JavaScript:

document.getElementById("element").addEventListener("mouseenter", function() {
    this.classList.remove("hidden");
    this.classList.add("visible");
});

document.getElementById("element").addEventListener("mouseleave", function() {
    this.classList.remove("visible");
    this.classList.add("hidden");
});

这个实例演示了如何使用visibility属性和CSS过渡来创建一个平滑的元素过渡效果。当鼠标悬停在元素上时，它会平滑地显示出来，鼠标离开时它会平滑地隐藏起来。

四、总结

display属性：

display属性用于定义元素应该生成的框的类型。
常见的display属性值包括：
- none: 元素不会被渲染在页面上，且不占据空间。
- block: 元素被渲染为块级元素，占据一整行。
- inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
- inline-block: 元素被渲染为内联块级元素，同时具有块级元素和内联元素的特性。
- flex: 元素被渲染为弹性盒子容器。
- grid: 元素被渲染为网格容器。
通过组合不同的display属性值，可以创建各种各样的布局。

visibility属性：

visibility属性用于控制元素的可见性。
常见的visibility属性值包括：
- visible: 元素可见。
- hidden: 元素不可见，但仍占据空间。
与display: none;相比，visibility: hidden;隐藏的元素仍会占据文档流中的位置，只是不可见。
visibility属性可以与过渡效果一起使用，以创建平滑的元素过渡效果。