在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. 【转】linux之自建yum仓库

    原链接:http://www.live-in.org/archives/1410.html 平时使用yum方式安装更新软件,可以自建一个yum源,同步官方更新源,这样如果本地有机器要升级的话就可以直接 ...

  2. 黑马程序员——读取Plist文件

    -iOS培训,iOS学习-------型技术博客.期待与您交流!------------ 读取Plist文件     一:新建一个plist文件,并将plist文件数据填入plist文件中,这里pli ...

  3. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  4. 去掉Eclipse打开后定期弹出Usage Data Upload对话框

    Eclipse 的 UDC 老定期蹦出来说要上传使用数据到 eclipse 官网服务器去除方法: 1.删除 eclipse/plugins 目录下以 org.eclipse.epp.usagedata ...

  5. Codeforces 509F Progress Monitoring

    http://codeforces.com/problemset/problem/509/F 题目大意:给出一个遍历树的程序的输出的遍历顺序b序列,问可能的树的形态有多少种. 思路:记忆化搜索 其中我 ...

  6. 微软推荐的Get a code signing certificate流程和链接

    Get a code signing certificate   Before you can establish a Windows Dev Center hardware dashboard ac ...

  7. python之路-随笔 python处理excel文件

    小罗问我怎么从excel中读取数据,然后我百了一番,做下记录 以下代码来源于:http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html ...

  8. java获取指定长度随机数（版本1）

    获取指定长度随机数,含大小写字母和数字 package org.sw; import java.util.Random; /** * 得到指定位数的随机数 * @author mengzw * @si ...

  9. java实现各种数据统计图（柱形图，饼图，折线图）

    近期在做数据挖掘的课程设计,须要将数据分析的结果非常直观的展现给用户,这就要用到数据统计图,要实现这个功能就须要几个第三方包了: 1.       jfreechart-1.0.13.jar 2.   ...

  10. kaggle之识别谷歌街景图片中的字母

    https://github.com/lijingpeng/kaggle/tree/master/competitions/image_recognize 识别谷歌街景图片中的字母 street-vi ...