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. [hadoop] hadoop-all-in-one-伪分布式安装

    hadoop伪分布式-all-in-one安装 #查看hadoop 版本 [root@hadoop-allinone-200-123 bin]# pwd /wdcloud/app/hadoop-2.7 ...

  2. ubuntu16.04安装jdk，tomcat

    ubuntu16.04安装jdk,tomcat 最近装了一下tomcat,网上的教程很多,我也试了很多次,但是有一些教程关于tomcat配置是错误的,让我走上了歧途.差点重装系统,还好王总及时出手帮助 ...

  3. (47) odoo详细操作手册

    odoo 8 详细操作手册, ERP(Odoo8.0)操作手册-v1.10(陈伟明).pdf 链接: http://pan.baidu.com/s/1hsp0bVQ 密码: r9tt 花了将近9个月时 ...

  4. JavaScipt 样式操作

    我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: ...

  5. angular路由

    ngRoute需要引进以下文件 <script src="http://code.angularjs.org/1.2.5/angular.min.js"></sc ...

  6. 如何使用Notepad++编译运行php

    安装编译运行文件的插件.插件-Plugin Manager-Show Plugin Manager. 找到NppExec插件,从这个插件的名字来看就是各位文件的执行.点击Install.需要下载安装, ...

  7. 20169212《Linux内核原理与分析》第十一周作业

    缓冲区溢出漏洞实验 缓冲区溢出漏洞:缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器 ...

  8. opencv用imread( argv[1], 1)读取图片

    显示一幅图:主要是运用功能:imread namedWindow imshowimread:从字面意思我们就可以看懂,用来读取图片的:namedWindow:显然,我们也可以看到这是用来命名窗口名称的 ...

  9. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(四)

    前言 这一篇,我们终于到了讲解Entity Framework CodeFirst 的时刻了,首先创建实体对象模型,然后会通过配置Fluent API的方式来对实体对象模型进行完整的数据库映射操作. ...

  10. spark发行版笔记9

    感谢DT大数据梦工厂支持提供技术支持,DT大数据梦工厂专注于Spark发行版定制. 本期概览: 1 Receiver生命全周期 首先,我们找到数据来源的入口,入口如下 Receiver的设计是极其巧妙 ...