css如何不显示元素

PHP中文网 JavaScript

本文摘自PHP中文网，作者coldplay.xixi，侵删。

css设置不显示元素的方法：1、使用【display: none;】方法；2、将【display:none;】改成【visibility: hidden;】

本教程操作环境：windows7系统、css3版，DELL G3电脑。

css设置不显示元素的方法：

（1）display: none;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <style type="text/css">

    .box {

        width: 160px;

        height: 100px;

        background: #cad5eb;

    }

    .title {

        height: 40px;

        background: #54a962;

    }

    .content {

        height: 60px;

        background: #5650bb;

    }

    </style>

</head>

<body>

    <div class="box">

        <h3 class="title">标题</h3>

        <p class="content">内容</p>

    </div>

</body>

</html>

ec57e67f594a5d03de7d7b155e46b9b.png

设置display: none;后的效果如下显示

79f8a8c7823875ebb8b7f0633433c1c.png

可以看出原来的标题部分不见了，而内容部分占领了原来标题的部分

（2）visibility: hidden;

还是上面的例子，只是这次将display:none;改成visibility: hidden; 但结果却大不相同

d4ed0c5c3fe294ef852c435b135bfd5.png

以上就是css如何不显示元素的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css如何清除input默认样式

css操作控件实现disable效果

css border-width属性怎么用

css如何让img垂直居中

jquery实现带弹窗和次数的转盘抽奖（代码）

css怎样设置字体靠左显示

vue怎么引用css

一招搞定css相对原点定位背景图片

文字居中的css代码是什么

几种关于html和css的使用方法

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...