之前写过一篇有关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. iOS8中使用CoreLocation定位［转］

    本文转自:http://blog.devzeng.com/blog/ios8-corelocation-framework.html iOS8以前使用CoreLocation定位 1.首先定义一个全局 ...

  2. 微信、qq时间格式模板

    产品近来蛋疼,时间格式从做完到现在改了四遍了 ,最新的要求如下: * 2分钟内 无显示 * 2分钟-24小时 HH:mm * 昨天 昨天 HH:mm * 前天 前天 HH:mm * 今年 MM:DD ...

  3. Qt实现FlatUI样式(开源)

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反而没有扁平 ...

  4. c/c++:重载 覆盖 隐藏 overload override overwrite

    http://www.cnblogs.com/qlee/archive/2011/07/04/2097055.html 成员函数的重载.覆盖与隐藏成员函数的重载.覆盖(override)与隐藏很容易混 ...

  5. 超实用的JavaScript技巧及最佳实践（上）

    在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的. 文中所提供的代码片段都已 ...

  6. 快乐的JS正则表达式（一）

    上一篇介绍了为什么需要正则,那从这一篇开始我们就去学习如何使用正则. 在js中有两种方式创建正则表达式: var reg = new RegExp("表达式","可选规则 ...

  7. 【MSDN原版】Windows 7 with SP1各版本下载

    Windows 7 Ultimate with Service Pack 1简体中文旗舰版:Windows 7 Ultimate with Service Pack 1 (x86) - DVD (Ch ...

  8. redis实现有序的消息队列

    redis是什么东西就不多说了,网上文章一搜一大堆. 首先来说一下我要实现的功能: 类似一个消息中转站吧,如果有人要发送消息,先将消息发到我这里来,然后我这边进行转发,为的就是有一个统一的管理和修改时 ...

  9. 基于tiny4412的Linux内核移植 -- MMA7660驱动移植（九-2）

    作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...

  10. 【转载】关于Embedded Linux启动的经典问题

    转载自:http://linux.chinaunix.net/techdoc/install/2009/04/13/1107608.shtml 发信人: armlinux (armlinux), 信区 ...