此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果：

一、首先在页面中放2个div，并用不同的背景色区分他们：

 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>两种隐藏元素方式的区别</title>

 <style type="text/css">

 div{ width: 100px; height: 100px; color: white; text-align: center; line-height: 100px; font-size: 40px;}

 </style>

 </head>

 <body>

 <div style="background: blue;>div1</div>

 <div style="background: red;">div2</div>

 </body>

 </html>

二、给div1设置【display: none】：

<div style="background: blue; display: none">div1</div>

三、给div1的【display: none】换成【visibility: hidden】：

<div style="background: blue; visibility: hidden">div1</div>

四、总结：

【display: none】：隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；

【visibility: hidden】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。

两种隐藏元素方式【display: none】和【visibility: hidden】的区别的更多相关文章

  1. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题

    此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hid ...

  2. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  3. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

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

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

  5. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

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

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

  7. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  8. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  9. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

随机推荐

  1. 【Xamarin开发 Android 系列 2】VS2015跨平台开发的几种方式

    原文:[Xamarin开发 Android 系列 2]VS2015跨平台开发的几种方式 在微软Build大会上,微软宣布在VS2015中支持三种方式进行跨平台的开发. 1. Xamarin 2. Co ...

  2. WordPress Bradesco Gateway插件‘falha.php’跨站脚本漏洞

    漏洞名称: WordPress Bradesco Gateway插件‘falha.php’跨站脚本漏洞 CNNVD编号: CNNVD-201309-451 发布时间: 2013-09-26 更新时间: ...

  3. BZOJ1831: [AHOI2008]逆序对

    1831: [AHOI2008]逆序对 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 341  Solved: 226[Submit][Status] ...

  4. 使用VisualStudio进行单元测试之二

    借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...

  5. 洛谷P1407 工资

    洛谷P1407 工资 本题地址:http://www.luogu.org/problem/show?pid=1407 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司 ...

  6. POJ 3666 Making the Grade （DP滚动数组）

    题意:农夫约翰想修一条尽量平缓的路,路的每一段海拔是A[i],修理后是B[i],花费|A[i] – B[i]|,求最小花费.(数据有问题,代码只是单调递增的情况) #include <stdio ...

  7. Poj 1151-Atlantis 矩形切割

    题目:http://poj.org/problem?id=1151 Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissio ...

  8. Python的高级特性之切片、迭代、列表生成式、生成器

    切片 切片就是获取一个list.tuple.字符串等的部分元素 l = range(100) #取[0,5)元素 print(l[:5]) #[0, 1, 2, 3, 4] #在[0,99]中每隔10 ...

  9. JAVA--对象锁

    在并发环境下,解决共享资源冲突问题时,可以考虑使用锁机制. 1.对象的锁 所有对象都自动含有单一的锁. JVM负责跟踪对象被加锁的次数.如果一个对象被解锁,其计数变为0.在任务(线程)第一次给对象加锁 ...

  10. c语言数据处理！

    #include "stdio.h" struct { ]; long nume; ]}; ]; float score; }stur; main() { printf(" ...