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实现文字竖排效果

通过14张有趣生动的图片来了解 flexbox 的用法（值得收藏）

css属性可分为哪几大类

css如何设置渐变色

如何解决css英文不自动换行的问题

css怎么去除图片边框

css怎么删除一个样式

如何去掉css字体的上下空白

css如何设置输入框不可编辑

书写css样式有哪三种方式

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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