同样是隐藏，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. JavaScript 中 typeof 知多少？

    typeof运算符介绍:typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型.它返回值是一个字符串,该字符串说明运算数的类型. 你知道下面typeof运算的结果吗? typeof(1 ...

  2. linux之centos安装xampp

    一.xampp下载地址: http://downloads.sourceforge.net/project/xampp/XAMPP%20Linux/5.5.19/xampp-linux-x64-5.5 ...

  3. c++暂停

    #include<cstdlib> 加入这个 然后  system("pause");

  4. mongoDB操作命令及mongoDB的helper

    此项目已开源,开源地址是: http://mongodbhelper-csharp.googlecode.com/svn/trunk/ mongodb的helper using System; usi ...

  5. python(4)-迭代器 和 生成器

    迭代器是访问集合元素的一种方式.迭代器适合遍历一些巨大或无限的集合,比如几个G的文件.迭代器具有以下特点: 1. 访问者不需要关心迭代器内部的结构,只需通过__next__()方法不断取下一个内容 2 ...

  6. Eclipse输入任意字母或指定字符出现提示框

    Eclipse默认是输入"."的时候会有提示框提示对应的API. 如果想更方便的输入任意字母或者指定的符号出现提示框设置如下: 打开Eclipse,选中“Window”->& ...

  7. [改善Java代码]边界,边界,还是边界

    建议24:边界,边界,还是边界 import java.util.Scanner; public class Client { //一个会员拥有产品的最大数量 public final static ...

  8. 知道网站PV流量,如何选何云主机配置带宽大小

  9. pre 随变化的样式

    <pre style="white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-sp ...

  10. ASP.NET运行原理

    1,ASP.NET运行原理: 客户端向服务器发出请求 → 服务器处理请求→ 处理好的数据以报文发给浏览器 → 浏览器显示请求结果 2,Chrome浏览器,查看请求过程:F12打开浏览器的调试窗口: 3 ...