之前写过一篇有关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. itextpdf JAVA 输出PDF文档

    使用JAVA生成PDF的时候,还是有些注意事项需要处理的. 第一.中文问题,默认的itext是不支持中文的,想要支持,需要做些处理. 1.直接引用操作系统的中文字体库支持,由于此方案限制性强,又绑定了 ...

  2. 为什么要提倡“Design Pattern呢

    为什么要提倡“Design Pattern呢?根本原因是为了代码复用,增加可维护性. 那么怎么才能实现代码复用呢?面向对象有几个原则:开闭原则(Open Closed Principle,OCP).里 ...

  3. 内容营销三大实用法则（内含干货）-同样可运用在EDM数据营销中

    内容为王的时代,注重内容的发展才能屹立于互联网的浪潮之中.一个优秀内容在搜寻引擎优化.用户互动,促进销售等方面都扮演重要的角色,博主在这方面深有体会,但是很多人往往走向事情的反面,不注重实际的内容,而 ...

  4. Android 使用NDK编译sipdroid Library

    sipdroid是一款开源的运行于Android平台上的voip,目前支持音频和视频通话: 项目拖管地址:http://code.google.com/p/sipdroid/ 下载源代码,导入ecli ...

  5. Redis PHP通用类

    找到一个比较全的Redis PHP操作类库,分享给大家 <?php /**  * redis操作类  * 说明,任何为false的串,存在redis中都是空串.  * 只有在key不存在时,才会 ...

  6. 没有找到cxcore100.dll,因此这个应用程序未能启动，重新安装应用程序可能会修复此问题

    第一种情况: 出现这个问题多数是因为“环境变量PATH”未设置,虽然你可能在安装的过程中勾选了Add <...>\OpenCV\bin to the system PATH项!安装Open ...

  7. [OpenCV] Image Processing - Grayscale Transform

    "每个像素的输出值只取决于其输入值" 重难点:Histogram equalization 参考:笑得很甜 http://blog.csdn.net/xiaowei_cqu/art ...

  8. ELK+FileBeat+Log4Net搭建日志系统

    ELK+FileBeat+Log4Net搭建日志系统 来源:https://www.zybuluo.com/muyanfeixiang/note/608470 标签(空格分隔): ELK Log4Ne ...

  9. ASP.NET身份验证

    Asp.net的身份验证有有三种,分别是"Windows | Forms | Passport",其中又以Forms验 证用的最多,也最灵活. Forms 验证方式对基于用户的验证 ...

  10. Python3操作MySQL，查询数据并保存到文件中

    我们在测试过程中,可能需要到数据库中拉去一些数据,为从测试准备.比如最近在做接口性能测试的时候,就需要很多数据来支撑,所以就需要的数据库去查询数据,下面就是python3 查询 mysql 并且保存到 ...