两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题
2015-08-26 18:13
501 查看
此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了:
【display: none】:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;
【visibility: hidden】:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。
也有总结:(@Nicholas_F の 领域 原文)
display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visibility:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
但是我觉得并不够,所以就想了一下关于他的一个加载问题。
1、有属性display:none;的结构在加载页面时,是否会同时加载呢?或则是当他变成display:block;的时候才加载的呢?
2、有属性visibility:hidden;的结构在加载页面时,是否会同时加载呢?或则是当他变成visibility:visible;的时候才加载的呢?
个人的看法是:
display:;当他的值变成block 的时候,它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了,因为他的值为hidden的时候,它所占的空间还在。
【display: none】:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;
【visibility: hidden】:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。
也有总结:(@Nicholas_F の 领域 原文)
display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visibility:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
但是我觉得并不够,所以就想了一下关于他的一个加载问题。
1、有属性display:none;的结构在加载页面时,是否会同时加载呢?或则是当他变成display:block;的时候才加载的呢?
2、有属性visibility:hidden;的结构在加载页面时,是否会同时加载呢?或则是当他变成visibility:visible;的时候才加载的呢?
个人的看法是:
display:;当他的值变成block 的时候,它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了,因为他的值为hidden的时候,它所占的空间还在。
相关文章推荐
- libevent多线程使用事项
- HDOJ 3466 Proud Merchants(01背包)
- Server2008 II7中配置ASP+Access运行环境
- HDU---1272-小希的迷宫(并查集)
- Unity Game Programming AI(2)有限状态机
- STM32F103ZET6 用定时器级联方式输出特定数目的PWM
- 栈和队列
- 前端传递参数,由于控制器层类实现了struts2的ModelDriven而产生的一个异常
- 模拟键盘发送文字
- HDFS的回收站 && 安全模式
- 【C++】阅读计划
- C#使用Dispose模式实现手动对资源的释放
- Ubuntu中Atom编辑器显示中文乱码的处理方法
- SpringMVC注解
- B. Order Book------(Codeforces Round #317 [AimFund Thanks-Round] (Div. 2))
- HDU - 4687(带花树求最大匹配的变形)
- Ubuntu中Atom编辑器显示中文乱码的处理方法
- 最小表示法--让你速度gank序列
- kafka学习(二)--windows下安装配置
- 使用Python进行多进程编程