display：none与visibility：hidden有一个共同的作用是隐藏要显示的内容isplay：none 隐藏，但是不占空间 “看不见摸不到” 加载

display：none 隐藏，但是不占空间 看不见摸不到
不产生任何框，对布局没有影响，浏览器不显示其包括其后代元素，更不会占位

visibility：hidden 保留元素空间重绘，看不见 摸得到，相当于 留白 加载进来，因为他的空间是一直存在的，会生成元素框，只是元素不可视

针对他们的加载 现在有两种讨论，主要是针对于display：none的加载，visibility：hidden是页面加载时直接加载进来的，而对于display：none，到底是当其属性值从none改为block时才会加载还是一开始就加载进去不显示不占位，针对这个问题，有一个帖子也吵得挺厉害，具体是什么样不太清楚，个人感觉是一次性加载进去。

 

display：none与visibility：hidden区别的更多相关文章

  1. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  2. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  4. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  5. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  6. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  7. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  8. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  9. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  10. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

随机推荐

  1. 浏览器地址栏背后的logic

    曾经有面试题是这样的:"描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么?". 1.服务端返回baidu页面资源,浏览器载入html 2.浏览器开 ...

  2. Linux内核原子（1） - spinlock的实现

    spinlock的数据结构spinlock_t定义在头文件linux/spinlock_types.h里面: typedef struct { raw_spinlock_t raw_lock; #if ...

  3. checkbox设置单选

    http://blog.sina.com.cn/s/blog_4550f3ca010137td.html $("*")  ‘表示获取所有对象   $("#XXX" ...

  4. Sublime Text 2 配置(转载)

    转载 自 Sublime Text 2 的详细配置(C++) 想起暑假在公司偷偷写题,用不惯vs ,配sublime 又一直编译不了...每次用codeblocks 眼泪掉下来www 下载sublim ...

  5. 高性能 Oracle JDBC 编程

    了解如何利用连接和语句池特性来提高 Oracle 驱动的 JDBC 程序的性能.作者:Yuli Vasiliev2009 年 4 月发布使用诸如连接池和语句池等池技术可以显著提高数据库密集型应用程序的 ...

  6. Memcached(1)-----基本介绍

    memcached memcached概述 memcached是LiveJournal旗下Danga Interactive公司开发的一款软件.memcached是一个高性能,分布式内存对象缓存系统, ...

  7. ARC和MRC混编

    在targets的build phases选项下Compile Sources下选择要不使用arc编译的文件,双击它,输入 -fno-objc-arc 即可 MRC工程中也可以使用ARC的类.方法如下 ...

  8. keep the bar green to keep the code clean——Junit详解（一）

    测试用例 单元测试时每个开发人员必需掌握的,是保证开发过程中代码的准确性,无误性,保证代码质量.敏捷开发模式是先根据用户需求写测试用例,考虑基本所有用户所需要的情况,再写实现方法.单元测试有很多种,当 ...

  9. JavaScript 继承

    许多OO语言都支持两种继承方式,接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于在ECMAScript中,函数没有签名,无法实现接口继承,只支持实现继承,而且其实现继承主要 ...

  10. Storm进程通信机制

    storm的worker进程之间消息传递机制图: 每个worker都有一个独立的监听进程,监听配置文件中配置过的端口列表supervisor.slots.ports,topology.receiver ...