之前写过一篇有关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. Subgradient Algorithm

    Subgradient是一种可以优化不可微的凸函数的方法. 首先回顾凸函数的定义: $f(y) \geq f(x) + \nabla f(x)^T(y-x), all \hspace{2 pt} x, ...

  2. EF6+MYSQL之初体验

    初次使用EF6+MYSQL 这次的项目时间可拉得够长的,定制开发就是这样.客户真正用上了才能基本上不再改了.起先项目是php实现的,改造成桌面程序.用.net winform开发,像这种小项目肯定要用 ...

  3. mac x Yosemide（10.10） 下安装 jdk 1.7 (jdk 1.8)的方法

    当我们想在mac x yosemide 系统中更新jdk到1.7(1.8)的时候,会弹出下面的错误提示 解决这个问题的办法如下: 1.下载 好jdk 1.7(1.8) 地址:http://www.or ...

  4. pod install 错误 - incompatible character encodings: UTF-8 and ASCII-8BIT

    pod install [!] Invalid `Podfile` file: incompatible character encodings: UTF-8 and ASCII-8BIT. Upda ...

  5. 【原创】C#搭建足球赛事资料库与预测平台(5) 赔率数据表设计1

            本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 开源C#彩票数据资料库系列文章总目录:http://www.cn ...

  6. ubuntu14.04使用IceGridAdmin图形界面

    打开网页: http://www.rpmfind.net/linux/RPM/index.html输入搜索: icegrid-gui下载文件: icegrid-gui-3.5.1-2.mga4.x86 ...

  7. 使用 IntelliJ IDEA 2016和Maven创建Java Web项目的详细步骤及相关问题解决办法

    Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和简单,所以这里也强调下,尽量使用此类工具进行项目构建, 它可以管理项目的整个生命周期. 可以通过其命令做所有相关的工作,其 ...

  8. python读取xml文件

    关于python读取xml文章很多,但大多文章都是贴一个xml文件,然后再贴个处理文件的代码.这样并不利于初学者的学习,希望这篇文章可以更通俗易懂的教如何使用python 来读取xml 文件. 什么是 ...

  9. 设计模式之Interator模式(1)

    interator是java容器遍历的一种手段,当然遍历容易你可以使用普通的for(;;)或者for(Object o : new Arraylist<Object>()),都是可以的. ...

  10. [Tool] 常用开发工具注册码(持续更新)

    OS win10 激活 命令行 打开命令提示符( 管理员 ) 输入 slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 回车 再输入 slmgr /skms kms.xs ...