css如何不显示元素
程序员文章站
2022-04-17 17:52:14
...
css设置不显示元素的方法：1、使用【display: none;】方法；2、将【display:none;】改成【visibility: hidden;】
本教程操作环境：windows7系统、css3版，DELL G3电脑。
css设置不显示元素的方法：
（1）display: none;
<!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>
设置display: none;后的效果如下显示
可以看出原来的标题部分不见了，而内容部分占领了原来标题的部分
（2）visibility: hidden;
还是上面的例子，只是这次将display:none;改成visibility: hidden; 但结果却大不相同
以上就是css如何不显示元素的详细内容，更多请关注其它相关文章！
推荐阅读
-
如何不显示我最近的文档不记录打开过的文件
-
html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
-
css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理
-
CSS元素显示模式
-
不希望文件夹或文件被别人看到如何设置隐藏/显示文件或文件夹
-
css如何实现一个元素高度固定宽度按比例显示？
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
-
详解如何使用CSS选择所有子元素
-
CSS - li 元素显示在一行____ a 元素没有下横线
-
如何在CSS中解决长英文单词的页面显示问题？CSS3