同样是隐藏，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. hive-初看hive

    网上搜了一下找了很多介绍hive的资料,不是官方翻译就是含糊描述,对于刚接触的很难直观认识 我从一本介绍hadoop的书里找到了一些hive的资料,没太多废话.可以看看 http://pan.baid ...

  2. C# 之 Stream 和 byte[] 的相关转换

    1.二进制转换为图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream(m ...

  3. Maven学习小结(五 pom.xml详解[转])

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. B - Plane of Tanks: Pro

    Description Vasya has been playing Plane of Tanks with his friends the whole year. Now it is time to ...

  5. java 网络编程-tcp/udp

    --转自:http://blog.csdn.net/nyzhl/article/details/1705039 直接把代码写在这里,解释看这里吧:http://blog.csdn.net/nyzhl/ ...

  6. plsql常用快捷键

    plsql使用技巧 1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动 ...

  7. Java操作Wrod文档的工具类

    需要有jacob的jar包支持 import java.util.Iterator; import java.util.List; import java.util.HashMap; import c ...

  8. 【极角排序、扫描线】UVa 1606 - Amphiphilic Carbon Molecules（两亲性分子）

    Shanghai Hypercomputers, the world's largest computer chip manufacturer, has invented a new class of ...

  9. hdu 4614 线段树

    思路:当k为1的时候,用二分法查询包含有f个空瓶的上界r,然后更新会方便很多,直接更新区间(a,r)了. #include<iostream> #include<cstdio> ...

  10. 解决python 提示 SyntaxError: Missing parentheses in call to 'print'

    刚刚学习python,练习他的输出,发现输出一个常量时报错了,如下: 发现是因为python2.X版本与python3.X版本输出方式不同造成的在python3.X的,输入内容时都要带上括号pytho ...