实例详解display:none与visible:hidden的区别
更新时间：2017年03月30日 10:43:26 投稿：lqh
这篇文章主要介绍了实例详解display:none与visible:hidden的区别的相关资料,需要的朋友可以参考下
display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
例子：
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
下面小编就为大家带来一篇IScroll那些事_当内容不足时下拉刷新的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
下面小编就为大家带来一篇js复制内容到剪贴板代码,js复制代码的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了禁止IE用右键的JS代码，有需要的朋友可以参考一下2013-12-12
今天在写后台交互的时候原来都是用alert太难看每次都需要点击一下才可以，比较麻烦所以特整理了几个比较好的js提示框代码，方便提示一下2023-04-04
这篇文章主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了JavaScript实现简单日期特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了JS基于cookie实现来宾统计记录访客信息的方法,通过javascript记录访客信息到cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
单击浏览器右上角的X关闭窗口弹出提示的小例子，需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识，文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论