请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › display:none和visibility:hidden的区别！

发新帖

查看: 11759|回复: 32

[讨论] display:none和visibility:hidden的区别！ [复制链接]

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-4 12:15:47 |显示全部楼层

在网站上看到：“
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。
”这样的解释。
但是我觉得并不够，所以就想了一下关于他的一个加载问题。
有属性display:none;的结构在加载页面时，是否会同时加载呢？或则是当他变成display:block;的时候才加载的呢？
有属性visibility:hidden; 的结构在加载页面时，是否会同时加载呢？或则是当他变成visibility:visible; 的时候才加载的呢？

个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

这些观点都是我的一个推测，本人并不知道如何去测试，也找不到这方法的资料，所以到此来跟大家讨论讨论。
还望各位大虾指点迷津。

[ 本帖最后由 kaka48265 于 2009-8-4 13:54 编辑 ]

南极仙翁

西部数码顶级域名注册商39元抢注！

使用道具举报

网页切割机

帖子: 801
体力: 2016
威望: 2
居住地: 广东省广州市

发表于 2009-8-4 12:20:57 |显示全部楼层

这个问题，前些天我去参加一个面试的时候，面试官问过我。回来仔细研究了下，你的解释是完全正确的。

至于你的疑虑。我的答案是（仅供参考）：不管是用了什么css样式，html里的元素都会在打开网页后一并加载。这个说到底也是css的基本功能。就是结构与表现的分离。我们的html是结构，结构会全部加载，但是在表现的时候（也就是页面的外观），由css来控制你看的到还是看不到而已。

所以你说的：“display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。”

就这样理解即可。

窝窝装修我知道

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-4 12:47:19 |显示全部楼层

非常感谢你的解释！
我的问题你已经很好的跟我解释了。
不过不知道我们是否能扩展一下。
能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？
（我们暂且不说他合不合理。）

[ 本帖最后由 kaka48265 于 2009-8-4 12:49 编辑 ]

南极仙翁

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-8-4 12:53:27 |显示全部楼层

visibility

复制代码

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-4 13:08:16 |显示全部楼层

原帖由 birdstudio 于 2009-8-4 12:53 发表
visibility

亲爱的版主，麻烦您稍稍的解释一下。
我真不懂。
我上面好像有说到visibility 这个属性。

南极仙翁

使用道具举报

豆猫

钻石会员 

帖子: 489
体力: 16297
威望: 0
居住地: 北京市通州区

发表于 2009-8-4 13:42:58 |显示全部楼层

display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。

那些年，我们一起重构过的女孩。。。。。。

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-8-4 13:46:50 |显示全部楼层

回复 5# kaka48265 [楼主] 的帖子

你自己检查一下你的拼写。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-4 13:58:00 |显示全部楼层

6#
谢谢你的解释。
不过并非我们讨论的范围了！

7#
谢谢提醒，已经修改。

希望大家踊跃参与，提出宝贵意见。
如何实现控制它显示的时候它才加载进页面的方法。

南极仙翁

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-8-4 14:08:43 |显示全部楼层

原帖由 kaka48265 于 2009-8-4 13:58 发表
如何实现控制它显示的时候它才加载进页面的方法。

传说中的 Ajax ？

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

47tz　

帖子: 198
体力: 1134
威望: 0

发表于 2009-8-4 20:29:13 |显示全部楼层

提示：您可以先修改部分代码再运行

引用：
个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

你这个说法是不对的，应该都是在页面载入的时候就加载了
可以通过隐藏IFRAME来测试

页面载入的时候请注意看你浏览器的状态栏。

使用道具举报

帖子: 23
体力: 44
威望: 0

发表于 2009-8-4 21:44:13 |显示全部楼层

上楼的对，display:none和visibility:hidden都在页面加载时加载了。
你说visibility:hidden看不见但摸得到？我怎么摸不到呢？用ie和ns都摸不到，只是占用了位置。

努力酒脱
已所不欲不施于人

使用道具举报

落落

帖子: 186
体力: 435
威望: 0

发表于 2009-8-5 04:59:51 |显示全部楼层

你们说的加载是什么意思？如果指浏览器加载网络资源的话，那应该是display:block的时候才会被加载
大家可以做一个实验：下面这段代码，先在 #test { display:none;} 的情况下运行，然后断开网络，把display:none改成display:block 运行，结果是图片并没有被显示。在连接上网络，刷新，图片就显示了。

提示：您可以先修改部分代码再运行

使用道具举报

47tz　

帖子: 198
体力: 1134
威望: 0

发表于 2009-8-5 08:51:25 |显示全部楼层

回复 12# kapiter 的帖子

这位童鞋的理解直接脱离了网络，是不是说当你打开某个网站之后，然后断开网络刷新一下，你就可以直接读取本地缓存上的信息？

显然这是不成立的。

“下面这段代码，先在 #test { display:none;} 的情况下运行（会加载隐藏的内容），然后断开网络（此时内容页还在），把display:none改成display:block 运行（你修改之后运行需要刷新），结果是图片并没有被显示（网络都断开了还能显示个啥呀！）。”

使用道具举报

落落

帖子: 186
体力: 435
威望: 0

发表于 2009-8-5 09:18:16 |显示全部楼层

楼上的，我的意思就是检测display:none的时候有没有加载图片啊
如果加载了，那么浏览器的缓存里面就会有，即使断开了网络，display:block也能显示图片。
你们说的“加载”是什么意思呢？如果说是加载结构的话，那么这种讨论就完全没有意义，浏览器都是下载完整的html代码，而css只是负责表现样式。不管display:none还是display:block 我源代码里总是能看到吧，你们在讨论什么呢？

使用道具举报

初级会员 

帖子: 63
体力: 50
威望: 0

发表于 2009-8-5 09:52:04 |显示全部楼层

html的代码是一开始就加载进来的。而且是第一个请求。

楼主说“能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？“
这个要看你的实现目的了，也就是需要ajax，用iframe的作用。

测试display：none的时候，是否图片会加载的方法：
建一个页面，在一个隐藏的div的放一个img。
然后通过yslow的插件，关注下加载的请求就知道了。

努力！

使用道具举报

47tz　

帖子: 198
体力: 1134
威望: 0

发表于 2009-8-5 10:17:07 |显示全部楼层

回复 14# kapiter 的帖子

问题是图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件。有原则上的区别。

使用道具举报

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-5 13:09:36 |显示全部楼层

10#
你的例子已经很好的解释了这个东西，在看地址栏的时候我才明白。
它在加载网页的时候已经把那些把隐藏（display:none和visibility:hiddden）的结构都加载进来了。
看来只能用

传说中的 Ajax ？

才能实现了！

南极仙翁

使用道具举报

落落

帖子: 186
体力: 435
威望: 0

发表于 2009-8-5 13:33:15 |显示全部楼层

原帖由 47tz 于 2009-8-5 10:17 发表
问题是图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件 ...

大哥你还是理解错了我的意思断开网络后display:block不显示图片，正是说明了没断网络之前display:none的时候图片并不加载，所以缓存里面没有嘛

使用道具举报

kaka48265　楼主

南极仙翁

帖子: 184
体力: 756
威望: 0
居住地: 广东省广州市

发表于 2009-8-5 13:57:24 |显示全部楼层

# kapiter
# 47tz
两位大虾你们讨论都有点不明白对方的意思。
我来打个太极，说明一下。（可能有所偏差）

# kapiter的意思是：断网的情况下，当你从新运行网页的时候，网页还是会向远程服务器发出请求（例子中说的即是那个图片了），并非请求本地缓存。
# 47tz的意思是：既然我本地缓存已经有了你这个图片，那么在断网的情况下，从新运行网页的时候那么就直接去请求本地缓存了。

如有说错的地方还请指出！

[ 本帖最后由 kaka48265 于 2009-8-5 13:58 编辑 ]

南极仙翁

使用道具举报

落落

帖子: 186
体力: 435
威望: 0

发表于 2009-8-5 14:09:14 |显示全部楼层

楼上的大哥你误解我的意思了我并不没有说断网情况下不会请求本地缓存啊
正是因为断网情况下display:block时，在缓存里面也查找不到图片，才说明了缓存里面没有图片，说明了display:none的时候并没有从网络上下载图片

如果一开始联网的时候display:block，那么图片就会被下载下来，然后再断网display:block，这时候因为缓存里面有图片所以图片是可以显示的。

这个有那么难理解么

使用道具举报

忘穿秋水

银牌会员 

帖子: 677
体力: 1593
威望: 0
居住地: 广东省深圳市

发表于 2009-8-5 14:32:53 |显示全部楼层

回复 18# kapiter 的帖子

问题是，你设置了缓存没？
没设置好，你怎么知道浏览器一定读缓存？

使用道具举报

温和

帖子: 420
体力: 1108
威望: 1

发表于 2009-8-5 15:13:43 |显示全部楼层

v是空白的
b是后来的可以补充上来
可以这么理解吧

一个css3小站

使用道具举报

47tz　

帖子: 198
体力: 1134
威望: 0

发表于 2009-8-5 20:03:49 |显示全部楼层

回复 19# kaka48265 [楼主] 的帖子

拜托。。。你没看错吧？我的意思是相反的。怎么会去请求缓存呢？

使用道具举报

47tz　

帖子: 198
体力: 1134
威望: 0

发表于 2009-8-5 20:06:57 |显示全部楼层

回复 20# kapiter 的帖子

我发现我对你所说的确实理解歪哒

不过：

断开网络后display:block不显示图片，正是说明了没断网络之前display:none的时候图片并不加载

这个我觉得还是不能说明问题的。

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-8-5 20:20:42 |显示全部楼层

图片的 http 请求：
http://lifesinger.org/blog/2009/05/img-http-request/

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

帖子: 4
体力: 25
威望: 0

发表于 2009-8-5 20:26:27 |显示全部楼层

呃....

全都下载.
这两个一个占位一个不占位..从字面都能理解咯.none和.hidden的区别

还有需要讨论的吗.散会~

使用道具举报

落落

帖子: 186
体力: 435
威望: 0

发表于 2009-8-5 22:01:20 |显示全部楼层

原帖由 birdstudio 于 2009-8-5 20:20 发表
图片的 http 请求：
http://lifesinger.org/blog/2009/05/img-http-request/

看他那篇文章下面的回复，有人指出问题了，他对firefox和opera在display:none的时候的测试应该有问题。
我刚才用科来抓包分析了一下，在display:none的时候确实不会向图片的源地址发出http请求，
改成display:block就可以看到浏览器发出的http请求了

使用道具举报

Javin

帖子: 122
体力: 788
威望: 0
居住地: 广东省深圳市

发表于 2009-9-6 00:46:31 |显示全部楼层

我想kapiter说的下面的意思：

提示：您可以先修改部分代码再运行

[ 本帖最后由 okwxj 于 2009-9-6 00:48 编辑 ]

JS

使用道具举报

初级会员 

帖子: 53
体力: 221
威望: 0
居住地: 四川省成都市

发表于 2009-9-6 03:12:22 |显示全部楼层

这个试一下便知，上次我就发现了。一般用display:none; 因为visibility:hidden;依然占空间。

以文会友。

使用道具举报

初级会员 

帖子: 41
体力: 167
威望: 0
居住地: 湖北省武汉市

发表于 2009-11-13 14:18:32 |显示全部楼层

用firebug就会看到结构加裁了。

<img src="1.jpg" style="display: none" />
结论：只有Opera不产生请求。
注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-12 06:33 , Processed in 0.133386 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部