同样是隐藏，display:none与visibility:hidden有什么区别呢?

虽然display:none与visibility:hidden都能达到隐藏可见元素的作用（视觉上），但事实上，visibility:hidden却占据了空间，width、height等属性依然被加载出来，它就像个透明人,会依然占据空间。

因此，在html+css布局的时候，根据需要，如果元素需要被隐藏但又要保留位置，那么就用visibility:hidden，如果要让元素彻底隐藏且不占据空间位置，那么display:none吧。

CSS样式display:none和visibility:hidden的区别的更多相关文章

  1. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  2. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  3. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  4. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  5. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

  6. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

  7. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  8. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  9. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

随机推荐

  1. Session fixation--wiki

    http://en.wikipedia.org/wiki/Session_fixation In computer network security, session fixation attacks ...

  2. Redis 服务器

    Redis 服务器命令主要是用于管理 redis 服务. 实例 以下实例演示了如何获取 redis 服务器的统计信息: redis 127.0.0.1:6379> INFO # Server r ...

  3. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  4. SQL把做个字段组合成一个字符串

  5. 打印W图案

    一:规律 二维图形的展示都可以使用二维数组来解决,W图形x轴0,1,2,1,0,1,2.....在0到2直接来回的徘徊 y轴是在一直递增........ 二:代码 @Test /** * 测试打印w图 ...

  6. mac 下curl的使用

    curl用起来非常方便,但是老是记不住各个参数的含义,还是记录下来方便查询吧 这东西现在已经是苹果机上内置的命令行工具之一了,可见其魅力之一斑 1)二话不说,先从这里开始吧! curl http:// ...

  7. [改善Java代码]不同的场景使用不同的泛型通配符

    Java泛型支持通配符(Wildcard),可以单独使用一个"?"表示任意类,也可以使用extends关键字标识某一类(接口)的子类型,还可以使用super关键字标识某一类(接口) ...

  8. 【memset】关于memset的初始最大最小值

    声明:也是摘自网上各路大神的. memset的正规用法是只能用来初始化char类型的数组的,也就是说,它只接受0x00-0xFF的赋值. 因为char是1字节,memset是按照字节赋值的,相当于把每 ...

  9. .NE 学习概要

    也是个人的学习计划,仅供参考:)

  10. 初探html5---Video + DOM(视频播放)

    1:HTML5 开发环境下  lang="en" 2: <video width="320" height="240" control ...