在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. jquery checkbox 全选、取消全选

    $("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...

  2. Netbeans7.4下搭建struts2.3.16

    一:所需要的jar包如下: 在WEB-INF目录下新建一个lib文件夹将jar包复制到里面: 在这里要注意将jar包导入lib目录里还不可以,在这里与MyEclipse不同.在项目上右键属性-> ...

  3. content的定义

    http://www.myexception.cn/HTML-CSS/1472528.html http://stackoverflow.com/questions/2770681/css-conte ...

  4. Latch-up 閂鎖效應 & 靜電放電模式

    * * Latch-up 閂鎖效應, 又稱寄生PNPN效應或可控矽整流器 ( SCR, Silicon Controlled Rectifier ) 效應. 在整體矽的CMOS 管下, 不同極性攙雜的 ...

  5. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  6. 《Programming WPF》翻译 第5章 3.命名属性

    原文:<Programming WPF>翻译 第5章 3.命名属性 通过把同样的内嵌样式提升到资源中(正如第一章介绍的),我们可以给它一个名字,以及按名字使用它在我们的Button实例上, ...

  7. SEO的URL如何优化才是最佳

    原文地址:http://www.chinaz.com/web/2007/0413/6841.shtml 很多人都知道URL对SEO的重要之处,但是很多站点却忽略了站点的路径优化.今天本人在这里写几点关 ...

  8. ora-28056 (Writing audit records to Windows Event Log failed)

    系统:windows xp oracle 版本 SQL> select * from v$version; BANNER ------------------------------------ ...

  9. 后台数据导出为Excel

    数据导出的方法如下: 一.下载office的类库:microsoft.office.interop.excel.zip 根据电脑安装的office版本选择引入相应的类库,office2007选择12. ...

  10. UITextView 输入长度限制

    //还可以输入的长度. - (void)textViewDidChange:(UITextView *)textView { UITextRange *markRange = textView.mar ...