visibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，且不加载！

1、visibility:hidden--为隐藏的对象保留其物理空间
HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
 
2、display: none--不为被隐藏的对象保留其物理空间
HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
    <tr>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="display:none">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="visibility:hidden">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>style="display:none"</td>
   <td>style="visibility:hidden"</td>
  </tr>
</table>
</body>
</html>
结果如下：

个人收集（转载）CSS中 display:none和visibility:hidden的区别的更多相关文章

  1. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

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

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

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

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

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

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

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

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

  6. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

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

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

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

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

  9. CSS属性中display="none“与visibility="hidden"的不同

    display="none",元素会从页面移除,不在页面占用位置,当某个元素设置为display="none"时,这个元素后面的元素会移动上来 visibili ...

随机推荐

  1. 【并发编程】Executor类的继承结构

    来自为知笔记(Wiz)

  2. SQL 中delete和truncate区别

    1.前者按行删除,后者直接删除数据页 2.前者可带where删除部分,后者只能删除全表 3.前者在事务日志中记录每一行的记录,后者只记录页的释放 4.前者删除后,标识技术值不重置,后者重置 5.由fo ...

  3. (WPF) MVVM: 动态添加控件及绑定。

    比如需要显示一个键盘,里面有各个按键.实现的效果如下: 之前的思路,就是建立一个singleKey的控件,然后在后台用代码动态的添加到父控件里去, 再用代码在后台进行绑定. 这种实现方法并不是真正的M ...

  4. java数组初始化的三种方式

      //第一种 int[] is= new int[3]; is[0]=1; is[1]=2; is[2]=3; //第二种 int[] is2= {1,2,3}; //第三种 int[] is3= ...

  5. kafka模拟客户端发送、接受消息

    producer   消息的生成者,即发布消息 consumer   消息的消费者,即订阅消息 broker     Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...

  6. kuangbin RMQ

    这是kuangbin的RMQ,一维的,代码很简洁,附上: //kuangbin templet(查询最大值) 一维 //若想查最小,看提示更改 + ; ];//第二维是范围,即2^20约等于100万 ...

  7. java finally中含return语句

    <java核心技术卷一>中提到过:当finally子句包含return 语句时(当然在设计原则上是不允许在finally块中抛出异常或者 执行return语句的,我不明白为何java的设计 ...

  8. Awk 实例

    AWK 是一种用于处理文本的编程语言工具.AWK 在很多方面类似于 shell 编程语言,尽管 AWK 具有完全属于其本身的语法.它的设计思想来源于 SNOBOL4 .sed .Marc Rochki ...

  9. 词典对象 NSDictionary与NSMutableDictionary

    做过Java语言或者 C语言开发的朋友应该很清楚关键字map 吧,它可以将数据以键值对儿的形式储存起来,取值的时候通过KEY就可以直接拿到对应的值,非常方便,是一种非常常用的数据结构.在Objecti ...

  10. fatal error C1853: '*.pch' is not a precompiled header file created with this compile

    在菜单下选择Build--->点击Rebuild All,如果不起作用,你可以先把Debug或者Release中的文件删除,然后再试.