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. Python基础教程【读书笔记】 - 2016/7/4

    希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第二波:第7章  更加抽象 [总览] 创建自己的对象,是Python的核心概念!Python被称为面向对象的语言.介绍如 ...

  2. 战胜忧虑<5>——运用亚里士多德法则

    运用亚里士多德法则 如果人们将忧虑的时间,用来寻找解决问题的答案,那忧虑就会在人们智慧的光芒下消失.那么当你面对忧虑时,应该怎么办理?答案是,我们一定要学会用下面三种分析问题的基本步骤来解决各种不同的 ...

  3. "aa".equals(name)这种写法为什么就可以避免空指针

    public static void main(String[] args) { String name=null; if("aa".equals(name))//这种情形,不出现 ...

  4. Java的外部类和内部类+静态变量和非静态变量的组合关系

    看的李刚<疯狂java讲义>,里面讲内部类的地方感觉有点散而且不全,看完之后还是不十分清楚到底怎么用,于是自己写了个程序测试了一下.看如下代码,即可知道外部类和内部类+静态成员和非静态成员 ...

  5. SqlServer统计最近一周的数据

    select * from 表名 where  DATEDIFF( day, 日期字段列名,getdate())<7 and DATEPART(w,  日期字段列名) <DATEPART( ...

  6. 初步理解MVC

    一.Asp.net WebForms 与Asp.net MVC 概念 Asp.net是创建WEB应用的框架,MVC是能够用更好的方法来组织并管理代码的一种更高级架构体系. 我们可将原来的Asp.net ...

  7. 黄聪：使用WORDPRESS自带AJAX方法

    例如给网站每页logo后面的一句名言,点击“换一条”就会ajax动态加载一条,使用了wordpress的自带ajax方法.下面介绍如何使用wordpress自带ajax方法: 1.在header.ph ...

  8. C#笔记一 .Net Framwork

    参考Learning hard本人在博客园的主页: http://www.cnblogs.com/zhili/     以及本书中的一些知识点: http://www.cnblogs.com/zhil ...

  9. UVA 133 The Dole Queue

    The Dole Queue 题解: 这里写一个走多少步,返回位置的函数真的很重要,并且,把顺时针和逆时针写到了一起,也真的很厉害,需要学习 代码: #include<stdio.h> # ...

  10. android按钮监听器的四种技术

    android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方; 1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似 创 ...