在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. 距离顶部估计像素，显示div！

    <html> <head> <title>slide</title> <style type="text/css"> # ...

  2. xen之基本搭建

    1. 前言 所需包: kernel-xen xen xen-libs (xen依赖包) xen_runtime (xen依赖包) 以上xen包需要版本号一致,例如4.1.3版本,这里使用xm接口管理工 ...

  3. Song of Pi

    def main(): pi = ' # 预先给出需要比较的值 t = int(raw_input()) for _ in xrange(t): song = raw_input().strip(). ...

  4. Xshell4连接Linux后 win快捷键锁屏

    今天在使用Xshell连接CentOS后 使用Vim编辑器编辑完后 习惯性的按了Ctrl+S 然后按什么都不起作用 只能重新连接 通过查资料得知 Ctrl + S 是Linux 锁屏的快捷键 要解除锁 ...

  5. ubuntu install express

    1:全局安装express 2:查看Express安装的版本信息 3:运行express 创建工程,提示express未安装 4:重新安装Express4,这次安装成功 5:使用Express构建项目 ...

  6. 【转】java中byte, int的转换, byte String转换

    原文网址:http://freewind886.blog.163.com/blog/static/661924642011810236100/ 最近在做些与编解码相关的事情,又遇到了byte和int的 ...

  7. iOS FMDB中的使用

    n使用事务 [queue inTransaction:^(FMDatabase *db, BOOL *rollback) { [db executeUpdate:@"INSERT INTO ...

  8. Android——SQLite实现面向对象CRUD

    android中SQLite的使用,事实上倒也不难.可是与JDBC操作数据库相比,这个还是有点不顺手,并且我好久没写底层的封装了,使用SSM框架这些都不须要考虑......好了,废话不多说.以下直接建 ...

  9. Coding.net代码托管空间申请与使用-安装并运行WordPress博客

    参考: http://www.freehao123.com/coding-net/ Coding.net这是一个国内新兴的代码托管平台,功能主要包括:代码托管.在线运行环境.监控代码质量,兼有一定的社 ...

  10. RMAN-FORMAT-CONFIGURE及动态性能表

    一.FORMAT参数在备份过程中,可指定format参数来自定义备份片段的命令规则,比如: RMAN> BACKUP DATABASE FORMAT 'D:\BACKUP\%U'; RMAN&g ...