css隐藏div的方法:
1、display:none
css隐藏DIV及内容,完全隐藏内容与布局
解释:使用CSS单词display:none;完全隐藏文本及图片
使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间,通常用于JS特效隐藏、隐藏统计代码显示图标。
示例:
<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } .show{ height:100px; width:100px; display:none; } </style> <body> <div id="tab"> <h2>show</h2> <div class="show"></div> <h1>version</h1> </div> </body> </html>
效果图:
2.version:hidden
variable:hidden该div会被隐藏,但是依旧占样式空间,该div依然会影响布局
总结:display:none使div不存在,variable:hidden会保留div的宽高,占用一个空白区
示例:
<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } .show{ height:100px; width:100px; variable:hidden; } </style> <body> <div id="tab"> <h2>show</h2> <div class="show"></div> <h1>version</h1> </div> </body> </html>
效果图:
以上就是css如何隐藏一个div?的详细内容,更多请关注易知道|edz.cc其它相关文章!