在css中， display:none和visibility:hidden都能够使元素隐藏。但是两者所带来的效果完全不同。

css  display:none

当使用该样式的时候，HTML元素的宽高等各种属性都将失效，其所占据的空间消失，可将该元素视作完全不存在。

css  visibility:hidden

当使用该样式的时候，HTML元素的宽高等各种属性不会失效，其所占据的空间也会被完全保留下来，可将该元素视作完全透明。

*当然当某HTML元素具有样式display: none;visibility: visible;的时候元素不显示。

*当某HTML元素是绝对定位的时候，可以通过将其left属性值设置为负值。

css元素隐藏（display:none和visibility:hidden）的更多相关文章

  1. CSS属性中display="none“与visibility="hidden"的不同

    display="none",元素会从页面移除,不在页面占用位置,当某个元素设置为display="none"时,这个元素后面的元素会移动上来 visibili ...

  2. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

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

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

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

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

  5. CSS魔法堂：display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  6. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

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

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

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

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

  9. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

随机推荐

  1. javascript----bug

    JSON.parse(null)------------某些手机浏览器不支持.

  2. POJ 3675 Telescope

    题意:给定一个不自交的多边形,要求和圆心在原点的圆的面积交. 思路:同POJ2986,是加强版 代码: #include<algorithm> #include<cstdio> ...

  3. QtCreator调试传入运行参数

    QtCreator是非常不错的IDE,最近在做的Qt命令行应用,因为调试的环境不同等问题,需要在调试的时候为 main() 传入参数.度娘了半天,没找到方法,只能自力更生.后来在“项目-构建和运行-运 ...

  4. 使用FastReport的UserDataSet时候，遇到TfrxMemoView内容过多而打印不全的问题

    解决方案很简单,就是把Memo所在的Band勾选Stretch就行了.另外还可勾选StartNewPage. 至于UserDataSet本身,猜测就是人为的构造一个类似数据库的集合,大致使用代码如下: ...

  5. 【转】 ubuntu下fastboot找不到devices

    原文网址:http://memory.blog.51cto.com/6054201/1202420 转载补充: 1.首先,手机必须先进入bootloader状态,fastboot devices才能有 ...

  6. 给Eclipse安装Google app engine插件

    1.一般的做法: 参考:https://developers.google.com/eclipse/docs/install-eclipse-4.3 2. 因为 上面的做法一直没有成功,改为下载离线包 ...

  7. HDOJ-1016 Prime Ring Problem（DFS）

    http://acm.hdu.edu.cn/showproblem.php?pid=1016 题意:输入n,代表有一个包含n个节点的环,在环中的节点中填入1,2...n-1,n,要求填入的数与左边的数 ...

  8. Python Open Flash Chart (pyOFC2) — Home

    Python Open Flash Chart (pyOFC2) - Home pyOFC2 Python Open Flash Chart 2

  9. UITableView 自定义选中Cell颜色

    cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView ...

  10. web前端 - 模态对话框

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...