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. Java 嵌套作用域

    在C/C++中,当一个块处于另一个块作用域内的时候,内层定义的变量会把外层的变量隐藏, 遵循所谓的就近原则. 在Java中,在内层定义与外层同名的变量是禁止的! 如下: int i = 0; for( ...

  2. Python网络编程03----Python3.*中socketserver

    socketserver(在Python2.*中的是SocketServer模块)是标准库中一个高级别的模块.用于简化网络客户与服务器的实现(在前面使用socket的过程中,我们先设置了socket的 ...

  3. 在VS2010 中兼容Qt4和Qt5

    1,同时安装Qt4和Qt5 Qt_add,然后在 2. 如果之前的项目使用Qt4编写的,如果新添加新的类和ui的话,一定要选择Qt Add_in 1.1.11,不然就无法生成moc文件,随便选择 Ch ...

  4. php大力力 [021节]mysql表名在mac下不能大写

    2015-08-27 php大力力021.mysql表名在mac下不能大写 刚才数据库里面,phpMyAdmin狂出错. Some errors have been detected on the s ...

  5. Ubuntu下安装Apache mysql php的命令

    sudo apt-get install apache2 php5-mysql libapache2-mod-php5 mysql-serversudo apt-get install php5-gd ...

  6. 【LeetCode OJ】Pascal's Triangle II

    Problem Link: http://oj.leetcode.com/problems/pascals-triangle-ii/ Let T[i][j] be the j-th element o ...

  7. Inno Setup 打包工具总结

    Inno Setup 打包工具总结 分类: Install Setup 2013-02-02 15:44 2386人阅读 评论(0) 收藏 举报 最近打包用到了Inno setup,在这个过程中容易犯 ...

  8. 【转】SQL SERVER日志满或过大的处理方法

    原文转自:http://blog.chinaunix.net/uid-7953959-id-2543262.html 事务日志文件Transaction Log File是用来记录数据库更新情况的文件 ...

  9. fsutil

    编号:1035时间:2016年8月29日15:41:57功能:fsutil栗子:fsutil file createnew e:\b.txt 1073741824 //创建1G文件http://www ...

  10. html 和 body详解

    1.背景色 当不设置html的时候,html的属性不生效,浏览器会捕获body的颜色作为浏览器背景颜色,如果html生效了,则会捕获html的颜色作为浏览器背景颜色. [例1:不设置 html] bo ...