之前写过一篇有关visibility:hidden和display:none的文章：为什么要用用visibility:hidden;代替display:none;？主要是从浏览器性能方面入手，却没写两者的主要区别，今天补充。

首先display:none,这个none会把元素从dom树中“摘除”，这时其他元素会立马填充该元素的位置，也就是说一旦设置为none，这个元素是真的不存在了。

而visibility:hidden,它就像一块“抹布”，把花花绿绿的元素都擦成透明色，透明到我们看不到，但元素依然存在。就像一块玻璃虽然透明到我们看不到，但依然存在占领着原来就拥有的空间，不会像display:none;一样从dom树上摘除。这就是我目前阶段所理解的。

以下是段小代码，效果立竿见影：

<html>

<head>

<style>

</style>

<script language="JavaScript">

    function toggleDisplay(me){

        if (me.style.display=="block"){

            me.style.display="inline";

            alert("Text is now 'inline'.");

            }

        else {

            if (me.style.display=="inline"){

                me.style.display="none";

                alert("Text is now 'none'. It will reappear in three seconds.");

                window.setTimeout("blueText.style.display='block';",3000,"JavaScript");

                }

            else {

                me.style.display="block";

                alert("Text is now 'block'.");

                }

            }

        }

</script>

 	<body>

		<div>

				Click on the <span id="blueText" onclick="toggleDisplay(this)"

			style="color:blue;position:relative;cursor:hand;">blue text</span> to

			see how it affects the flow.

		</div>

	</body>

</html>

下面是各个属性值：

display的属性值有block，inline，none。先说block，前端攻城师都能信手捏来一大批块级元素和行内元素，这两种元素的根本区别在于其display属性的默认值，倘若display属性的默认值是block，如<div>，那么很明显那它天生就是块级元素，如果默认为inline，如<span>那很顺其自然就是行内元素，因此，行内元素和块级元素可以通过改变其默认的display属性值来相互转换，也就是说把<div>设为display:inline;那么它也立马成为行内元素，同样<span>设为display:block;也会变成块级元素。

visibility的属性值有：visible,hidden,collapse,inherit.

visible为默认属性，元素可见。

hidden如上所述，隐藏不可见（擦成透明，不显示但依然占有空间）

clooapse用于表格，作用与hidden一样。

inherit表示遵从父元素的visibility属性值，即继承自父元素。

说起inherit那就不得不提auto，那就再写篇有关两者的总结吧。

再谈visibility:hidden和display:none的更多相关文章

  1. 为什么要用visibility:hidden;代替display:none;？

    为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...

  2. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  3. What is the difference between visibility:hidden and display:none?

    What is the difference between visibility:hidden and display:none? 答案1 display:none means that the t ...

  4. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

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

    相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...

  6. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

    总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...

  7. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

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

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  9. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

随机推荐

  1. 说说lambda表达式与表达式树（未完）

    Lambda表达式可以转换成为代码(委托)或者数据(表达式树).若将其赋值给委托,则Lambda表达式将转换为IL代码:如果赋值给 Expression<TDelegate>,则构造出一颗 ...

  2. CentOS 7 上编译安装MySQL 5.6.23

    1.下载源码 wget http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.23.tar.gz 2.解压 tar zxvf mysql-5.6 ...

  3. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  4. [转]MySQL与MongoDB的操作对比

    MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...

  5. Touch Event

    转自:      http://hi.baidu.com/masaiui/item/971775e8b316238bc10d754b 参考: http://hedgehogking.com/?p=55 ...

  6. SSH: 本地.ssh目录下的公钥文件最好删掉

    这次ssh amazon ec2的instance,在家里电脑登录OK,到了公司电脑登录失败(只支持公钥机制).私钥已经拷贝到公司的ubuntu上了,奇怪. 后来发现是.ssh目录下存在一些公钥文件导 ...

  7. Bower 手册

    安装 Bower 使用 npm 安装 Bower.(Bower 依赖于 Node, npm 和 Git.) $ npm install -g bower 基本用法 安装程序包 程序包安装命令 bowe ...

  8. 配置visual studio code进行asp.net core rc2的开发

    1.安装.net core sdk https://github.com/dotnet/cli#installers-and-binaries,根据你的系统选择下载. 2.下载vscode的C#扩展插 ...

  9. Android 布局之GridLayout

    Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...

  10. Tips11:用[Rang]来限制Inspector中的变量

    我们在写脚本的过程中可能会用到很多Public变量,如INT型,Float型,这些变量在项目中可能有着一个默认的实际范围,如血量不能为负数,而且int float本来就是有一个范围的,如果对这些变量加 ...