在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. 在树莓派上安装leanote

    作者:冥王星 "noright0@163.com" 前言 宿舍有个树莓派2B,连接到电视机,安装OSMC系统,USB接口连接移动硬盘一块,平时用来BT下载和看电影.美剧. OSMC ...

  2. UITableView属性和方法

    1.初始化一个UITableView - (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)style struct CGRect { C ...

  3. Shell脚本调试技术

    http://www.ibm.com/developerworks/cn/linux/l-cn-shell-debug/ 一. 前言 shell编程在unix/linux世界中使用得非常广泛,熟练掌握 ...

  4. poj3261 -- Milk Patterns

                                                                        Milk Patterns Time Limit: 5000MS ...

  5. js深入研究之匿名函数

    /* 匿名函数*/ (function() { var foo = 10; var bar = 2; alert(foo * bar);})(); /* 匿名函数,带参数 */ (function(f ...

  6. 2015第15周日PostgreSQL学习

    英文版官网地址:http://www.postgresql.org/ 上面显示的最新版本信息是PostgreSQL 9.4.1, 9.3.6, 9.2.10, 9.1.15 & 9.0.19 ...

  7. lazy load 图片延迟加载 跟随滚动条

    http://plugins.jquery.com/lazyload/ Jquery.LazyLoad.js插件参数详解: 1,用图片提前占位 placeholder : "img/grey ...

  8. Reverse Nodes in k-Group 解答

    Question Given a linked list, reverse the nodes of a linked list k at a time and return its modified ...

  9. REVERSE关键字之REVERSE索引

    昨天说到REVERSE关键字可以指REVERSE函数和REVERSE索引,简单介绍了下REVERSE函数的含义,今天简单整理下REVERSE索引. REVERSE索引也是一种B树索引,但它物理上将按照 ...

  10. Linux用户管理（笔记）

    用户:UID, /etc/passwd组:GID, /etc/group 影子口令:用户:/etc/shadow组:/etc/gshadow 用户类别:管理员:0普通用户: 1-65535    系统 ...