css怎么使用display显示隐藏元素
程序员文章站
2022-03-14 18:57:20
...
css使用display显示隐藏元素的方法:1、给元素设置“display:none;”样式即可隐藏元素;2、给元素设置“display:block;”样式即可将隐藏的元素显示出来。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css display属性
display 属性规定元素应该生成的框的类型。设置:
display: none;
隐藏对象display: block;
除了转换为块级元素之外,还有显示元素的意思
说明:
使用display: none;
可以不占据空间的,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素隐藏--display:none</title> <style> .display{ display:none; } </style> </head> <body> <div>正常显示元素</div> <div class="display">隐藏元素</div> <div>正常显示元素</div> </body> </html>
效果图:
(学习视频分享:css视频教程)
以上就是css怎么使用display显示隐藏元素的详细内容,更多请关注其它相关文章!
推荐阅读
-
不同场景下使用CSS隐藏元素
-
Axure RP 8怎么使用按钮控制图片的显示或隐藏?
-
使用CSS隐藏元素滚动条
-
怎么使用firebug中firepath功能显示隐藏元素?
-
css 元素移动的时候怎么让超出部分隐藏起来_html/css_WEB-ITnose
-
饿了么项目---9、点击按钮显示或隐藏浮出层弹框 使用css3的过渡效果transition
-
怎么不要显示div超出隐藏部分_html/css_WEB-ITnose
-
【写给大家看的CSS】定位元素:使用position/display布局_html/css_WEB-ITnose
-
使用JavaScript控制HTML元素的显示和隐藏
-
【】使用Chart.js绘图 怎么才能把图例给显示出来?_html/css_WEB-ITnose