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. autoloader

    自动加载 $loader = new Zend_Application_Module_Autoloader(array(     'namespace' => 'Blog',     'base ...

  2. vim 编辑器使用积累(for win)

    开个坑,记录一下使用vim的进化历程.这东西不是一两天用的精的,多用自然就觉得有很多地方需要进一步学习,慢慢的效率就上来了. 首先我大部分时间都是在win上做开发,win上的vim需要去自己去配置诸多 ...

  3. Android 布局中 如何使控件居中

    首先要分两种不同情况,在两种不同的布局方式下:LinearLayout 和RelativeLayout 1. LinearLayout a). android:layout_gravity=" ...

  4. Objective－C（ Foundation框架 一 NSFileManager）

    NSFileManager 用来管理文件系统的 它可以用于常见的文件,文件夹操作(拷贝,剪切,创建) NSFileManager使用了单例模式(Singleton) 使用defaultManager可 ...

  5. EF框架学习

    简称EF,ADO.NET Entity Framework是微软以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案,是微软的一个ORM(面向对象的对象模型和关系型数据库的 ...

  6. java集合中的传值和传引用

    在学习java集合过程中发现了传值和传引用的区别: 我们来看下面两句话 ●java集合就像一种容器,我们可以把多个对象(实际上是对象的引用),丢进该容器.(来自疯狂java讲义) ●当使用Iterat ...

  7. C盘更改文件夹权限

    现象:点“安全”添加用户并允许所有权限后,点击“应用”,弹出“无法保存对xxxxx权限所在的更改.拒绝访问”对话框 解决方法:点击“安全”-->"高级"-->“所有者” ...

  8. php发送邮件

    <?php header("content-Type: text/html; charset=utf-8"); require("class.phpmailer.p ...

  9. 初始化git远程仓库步骤

    Git global setup git config --global user.name "bingo" git config --global user.email &quo ...

  10. js动画之平抛运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...