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. Linux下查看进程打开的文件句柄数和如何修改

    修改文件句柄数在Linux下,我们使用ulimit -n 命令可以看到单个进程能够打开的最大文件句柄数量(socket连接也算在里面).系统默认值1024. 对于一般的应用来说(象Apache.系统进 ...

  2. 利用mtd工具实现嵌入式设备在线升级

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   主要思路是:通过web post方式将升级文件交给CGI程序处理,然后通过mtd工具实现设备在线升级. 1.页面部分 & ...

  3. MSSQL 随机查询且降序排列

    --随机查询且降序排列 * FROM dbo.COMPANY_USER_INFO ORDER BY NEWID()) AS T ORDER BY T.cu_id DESC

  4. HDU - 5685 Problem A（逆元）

    这题我第一次想的就是直接模拟,因为我是这样感觉的,输入n是3次方,长度是5次方,加起来才8次方,里面的操作又不复杂,感觉应该能过,然而不如我所料,TLE了,玛德,这是第一次的代码. #include ...

  5. ubuntu配置DNS

    众所周知,centos配置DNS很简单,修改下/etc/resolv.conf,就可以生效.但是ubuntu中,resolv.conf文件却说明写入会被覆盖,不能写在这里. 方法一: 修改/etc/n ...

  6. 转--C++学习笔记（原创）

    http://www.cnblogs.com/maowang1991/p/3290321.html 以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读 ...

  7. JAVA 拆分窗口

    //拆分窗口 import java.awt.*; import javax.swing.*; public class Jiemian8 extends JFrame{ JSplitPane cf; ...

  8. android之RatingBar控件用法

    MainActivity.java package com.example.mars_2500_ratingbar; import android.support.v7.app.ActionBarAc ...

  9. Python深入03 对象的属性

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python一切皆对象(object),每个对象都可能有多个属性(attribut ...

  10. .NET 验证码/验证图片

    /// <summary> /// 验证码类 /// </summary> public class Rand { #region 生成随机数字 /// <summary ...