CSS中Display（显示）和Visibility（可见）

IT小庄同学

已于 2022-11-24 10:02:44 修改

阅读量1.3k

点赞数 1

文章标签： css css3 html

于 2022-11-24 06:00:00 首次发布

本文链接：https://blog.csdn.net/Z_CH8648/article/details/128002991

版权

CSS中常见的显示属性Display和可见属性Visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

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

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注

意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，

该元素虽然被隐藏了，但仍然会影响布局。

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

CSS Display - 块和内联元素

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

display 显示设置元素的显示类型:

inline 行内
block 块
inline-block 行内块
none 不显示

设置为none的元素及其后代都不会显示在页面上，也不占文档流

visibility 可见属性:

visible 可见
hidden 隐藏

特点：元素依然在原位置占位（相当于元素变为透明），无法选中，但是子元素如果设置了visibility:visible，则该子元素依然可见

opacity 不透明度:

取值0到1之间
0为透明 1为不透明
当父元素设为透明时，子元素也会有相同的透明度，哪怕子元素有单独设置的透明度
设为透明依旧可以选中

颜色设置透明度

rgba(red,green,blue,alpha)

#RRGGBBAA

实例:

<!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>Document</title>
    <style>
        /* span{ display: block;} */
        div{display: inline-block; width: 100px ;height: 50px;background-color: #CCAAAA80;}
        /* .div2{visibility: hidden;} */
        .div2{opacity: 0.5;}
        
        img{ display: block;}
    </style>
</head>
<body>
    <!-- <span>行内标签</span> -->
    <div class="div1">块标签1</div><div class="div2">块标签2<span style="opacity: .5">111</span></div><div class="div3">块标签3</div>
</body>
</html>

赶紧点赞收藏起来运行一下吧！

IT小庄同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中Display（显示）和Visibility（可见）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
复制链接

扫一扫