同样是隐藏，display:none与visibility:hidden有什么区别呢?

虽然display:none与visibility:hidden都能达到隐藏可见元素的作用（视觉上），但事实上，visibility:hidden却占据了空间，width、height等属性依然被加载出来，它就像个透明人,会依然占据空间。

因此，在html+css布局的时候，根据需要，如果元素需要被隐藏但又要保留位置，那么就用visibility:hidden，如果要让元素彻底隐藏且不占据空间位置，那么display:none吧。

CSS样式display:none和visibility:hidden的区别的更多相关文章

  1. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

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

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

  3. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

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

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

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

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

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

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

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

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

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

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

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

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

随机推荐

  1. UNIX基础知识之系统调用与库函数的区别与联系

    上图为UNIX操作系统的体系结构.内核的接口被称为系统调用(system call),公用函数库构建在系统调用接口之上,应用软件既可以使用公用函数库,也可直接使用系统调用. 更详细的说明如下: 所有操 ...

  2. Windows 之 删除文件出现“该项目不在请确认该项目的位置”

    原理为通过 DOS 命令自建一个 .bat 批处理文件. 第一步,首先桌面新建TXT文档: 第二步,主要使用DEL 和 RD 命令,打开文档复制下面内容里面: DEL /F /A /Q \\?\%1 ...

  3. B. Painting Pebbles

    B. Painting Pebbles time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. E - 最短的名字

    Description 在一个奇怪的村子中,很多人的名字都很长,比如aaaaa, bbb and abababab. 名字这么长,叫全名显然起来很不方便.所以村民之间一般只叫名字的前缀.比如叫'aaa ...

  5. Lexia3 Citroen/Peugeot Diagnostic tool install instruction

    We knew that Lexia-3 is a professional Citroen and Peugeot diagnostic interface, it’s both easy-usin ...

  6. 命令行界面下用户和组管理之groupadd的使用

    groupadd - create a new group groupadd命令用于创建一个新的组 语法     groupadd [options] group 选项:    -h 获得帮助信息   ...

  7. CF Drazil and Factorial (打表)

    Drazil and Factorial time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  8. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  9. Spring(3.2.3) - Beans(11): depends-on

    大多数情况下,Bean 之间的依赖非常直接:被依赖的 Bean 作为属性.在 XML 配置文件中最常见的就是使用 <ref/> 元素.在一些特殊情况下,Bean 之间的依赖不够直接.比如, ...

  10. Linux 命令 - uniq: 通知或忽略重复行

    给定一个已排好序的文件,uniq 会删除重复行并将结果输出到标准输出中.uniq 通常与 sort 结合使用以删除 sort 输出内容中的重复行. 命令格式 uniq [OPTION]... [INP ...