在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. DESTOON伪静态的设置/news/1.html格式

    在本地测试了,DT默认伪静态格式是这样http://127.0.0.2/news/show/1.htmlhttp://127.0.0.2/news/show1-1.html但是这种不利于seo优化所以 ...

  2. [spoj104][Highways] (生成树计数+矩阵树定理+高斯消元)

    In some countries building highways takes a lot of time... Maybe that's because there are many possi ...

  3. 栈应用之中缀表达式计算 MFC实现(计算器核心)

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 支持小数.阶乘.乘方.加减乘除.括号优先级运算,美化输出结果(显示结果末尾没有多余的0) void ...

  4. gridview两列数据的互换

    如下图所示: GridView绑定数据的时候,若ReName列里面有数据,则显示ReName列里面的数据,如果没有数据,则显示Name列里面的数据.Name和ReName是数据表里面的两个字段< ...

  5. linux系统下svn服务器操作命令

    linux系统下svn服务器操作命令 .输出指定文件或URL的内容.  svncat 目标[@版本]…如果指定了版本,将从指定的版本开始查找. svncat -r PREV filename > ...

  6. windows 守护进程

    use Win32::Process::Info; while (1==1){ use Sys::Hostname; use HTTP::Date qw(time2iso str2time time2 ...

  7. Ubuntu 16.04 LTS 正式发布：系统将持续更新5年

    Canonical 刚刚正式发布了Ubuntu 16.04 LTS (Xenial Xerus),这是一个长期支持版本,官方会提供长达5年的技术支持(包括常规更新/Bug修复/安全升级),一直到202 ...

  8. 在O（1）时间内删除单链表结点

    // 在O(1)时间内删除单链表结点 /* 思考: 很显然链表是一个节点地址不连续的存储结构 删除节点一般很容易会想到是修改p节点的前一个节点的next为p->next 然而除非是双向链表,否则 ...

  9. DirectX 开发环境配置

      想使用DirectX开发游戏,前提是要搭建DirectX的开发环境啦. 下面我们就一起学习下DirectX开发环境搭建 1. 首先是DirectX SDK安装, 下载地址是: http://www ...

  10. C#分层开发MySchool

    分层开发之MYSCHOOL No.1实现登陆功能,验证用户名和密码.从数据库里进行匹配,看是否有符合要求的数据. 在DAL层编写代码,返回值为布尔类型.方法参数为(student实体类对象),使用参数 ...