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. C#基础2

    namespace 基础 //定义一个命名空间,为基础 { class Program //定义一个名称为Program的类 { static void Main(string[] args) //这 ...

  2. 关于favicon.ico，shortcut icon，icon

    引入一篇文章.关于favicon.ico二三事. http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html 一直对favicon ...

  3. flume安装及配置介绍(二)

    注: 环境: skylin-linux Flume的下载方式: wget http://www.apache.org/dyn/closer.lua/flume/1.6.0/apache-flume-1 ...

  4. WinForm 窗体基本属性、公共控件

    一.WinForm:客户端程序制作 - C/S (B/S:服务器端) 它是基于.NET Framework框架上运行,不是必须在windows系统上才能运行---------------------- ...

  5. 使用 AngularJS & NodeJS 实现基于token 的认证应用（转）

    认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构 ...

  6. SQL Server数据库备份：通过Windows批处理命令执行

    通过Windows批处理命令执行SQL Server数据库备份 建立mybackup.bat ,输入以下内容直接运行该脚本,即可开始自动备份数据库也可把该脚本加入windows任务计划里执行. --- ...

  7. 解析提高PHP执行效率的50个技巧

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP手 ...

  8. 【Python③】python基本数据类型，变量和常量

    基本数据类型 Python中,能直接处理的数据类型有以下几种: 整数 Python可以处理任意大小的整数,包括负整数,程序中的写法和数学上的一样,例如:6,-666,8888…… 计算机使用二进制,所 ...

  9. leetcode6

    好吧,今天晚上赶项目确实是做不了三道题目了,最近项目在网络编程方面有些进步,学到了东西,有时间再积累下来,很深的体会就是,和别人一起写代码,虽然蛋疼但是比自己一个人写要好点,不过发现自己对链表和排序什 ...

  10. gbk与utf-8转换

    linux: #include <iconv.h> int code_convert(char *from_charset,char *to_charset,char *inbuf,int ...