display:none视为不存在且不加载，即，不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

visibility:hidden隐藏，但在浏览时保留位置，即，使对象在网页上不可见，但该对象在网页上所占的空间没有改变。

使用 display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。也即是说它仍具有高度、宽度等属性值。

代码演示：

表格初始状态：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">

        <tr>

            <td>A1

            </td>

            <td>A2

            </td>

        </tr>

        <tr>

            <td>B1

            </td>

            <td>B2

            </td>

        </tr>

    </table>

</body>

</html>

效果如下：

在表格第二行的 tr 加上 style="display:none"后：

在表格第二行的 tr 加上 style="visibility:hidden"后：

CSS中：display:none与visible:hidden的区别的更多相关文章

  1. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

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

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

  3. display:none与visible:hidden的区别 slideDown与

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...

  4. Readonly和disabled的区别 display:none和visible:hidden的区别

    怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...

  5. display:none与visible:hidden的区别

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

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

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

  7. 【javascript】jq之display:none与visible:hidden

    今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...

  8. jq之display:none与visible:hidden

    http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...

  9. display:none与visible:hidden区别

    if(list.style.display=='none'){                 list.style.display='block';             }else{       ...

随机推荐

  1. node.js 学习书籍推荐

    今天向大家推荐一本node.js开发的书籍,本人刚刚看完. 建议:如果你是node.js小白,下边的介绍你可以看一下,如果不是请直接return. <Node.js开发指南>是一本带有开发 ...

  2. MagSpoof：能预测并窃取你下一张信用卡号码的廉价设备

    想象一下,你丢失了信用卡,并从银行申请了一张新的信用卡.但是,如果在你收到这张新卡之前,一些网络罪犯就已经在使用你的新信用卡,此时你作何感想?是的,这完全是可以实现的,至少使用这个仅仅10美元的设备M ...

  3. Git ~ 管理修改 ~ Gitasd

    现在假设你一经常我了暂存区的概念 , 下面我们将要讨论的就是 , 为什么 Git 比其他的版本控制系统设计的优秀 , 因为 Git 跟踪管理的是修改而非文件 什么是修改  ? 修改就是 你在某个地方 ...

  4. 怎样修改Response中的内容

    重写Stream public class CatchTextStream : Stream { private Stream output; public CatchTextStream(Strea ...

  5. coreData旧版本增加字段,新版本是否可以继续使用旧版本内容的测试(MagicalRecord的使用)

    coreData使用第三方库MagicalRecord, 参考文章:http://blog.csdn.net/kuizhang1/article/details/21200367 coreData数据 ...

  6. C语言字符串声明

    重新学习C语言字符串声明char *a="nihao";char a[]="nihao";什么区别?前者定义的是指针,并且指向字符串常量“nihao”,后者是字 ...

  7. 简明python教程 --C++程序员的视角（九）：函数式编程、特殊类方法、测试及其他

    函数式编程 Lambda exec,eval和assert语句,repr函数   lambda语句 用来创建简短的单行匿名函数 print_assign = lambda name, value: n ...

  8. 本地日志数据实时接入到hadoop集群的数据接入方案

    1. 概述 本手册主要介绍了,一个将传统数据接入到Hadoop集群的数据接入方案和实施方法.供数据接入和集群运维人员参考. 1.1.  整体方案 Flume作为日志收集工具,监控一个文件目录或者一个文 ...

  9. （实用篇）微信网页授权(OAuth2.0) PHP 源码简单实现

    提要: 1. 建议对OAuth2.0协议做一个学习. 2. 微信官方文档和微信官网工具要得到充分利用. 比较简单,直接帖源代码了.其中"xxxxxxxxxx"部分,是需要依据自己环 ...

  10. nginx+tomcat集群配置(1)---根目录设定和多后端分发配置

    前言: 对于javaer而言, nginx+tomcat集群配置, 已然成了web应用部署的主流. 大公司如此, 小公司亦然. 对于个人开发者而言, 资源有限, 往往多个web应用混部于一台服务器(云 ...