温故而知新——CSS元素的显示与隐藏

最新推荐文章于 2023-02-22 20:31:20 发布

墨问莫问645

最新推荐文章于 2023-02-22 20:31:20 发布

阅读量203

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_64133626/article/details/125714751

版权

CSS元素的显示与隐藏可以由display、visibility和opacity这三种属性来控制，废话不多说，直接通过代码来理解：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的显示与隐藏</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
        }
        
        .b,
        .a:hover {
            display: none;
        }
        
        .d {
            /* visibility: visible; */
            visibility: hidden;
        }
        
        .f {
            opacity: 0;
            /* 透明度为0 故隐藏 */
        }
        
        .f:hover {
            opacity: 1;
            /* 显示 */
        }
    </style>
</head>

<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
    <div class="g">g</div>
</body>

</html>

1.display

使用 display:none 属性可以隐藏所有的信息，包括文本和图片

2.visibility

visible 默认值。元素是可见的
hidden 元素是不可见的
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

3.opacity

opacity 属性是设置一个元素的透明度。意思就是将 opacity 设为 0 时，只是从视觉上隐藏了元素，而元素本身依然占有它原来的位置且对网页的布局起作用。这一点和 visibility: hidden 相似。

总结： 显而易见，通过运行结果可以看出三种属性的区别是 display 设置为 none 时，b 会被隐藏不见，且不再占有原来的空间位置，html 标签元素也会被全部隐藏；而通过 visibility 和 opacity 设置隐藏时，d 和 f 原来的位置有明显的空白，这是因为隐藏的 d 和 f 仍然占据着原来的位置。

墨问莫问645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
温故而知新——CSS元素的显示与隐藏

CSS元素的显示与隐藏可以由display、visibility和opacity这三种属性来控制，废话不多说，直接通过代码来理解：1.display使用 display:none 属性可以隐藏所有的信息，包括文本和图片 2.visibilityhidden 元素是不可见的collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。3.opacityopacity 属性是设置一个元素
复制链接

扫一扫