大家知道，如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。

但特殊情况下我们只需要隐藏这个元素，但它的位置不能被占了，那该怎么实现呢。

突然发现css还有一个visibility属性，用 visibility:hidden;可以很方便实现隐藏元素在前台的显示，但它的位置不会被后边的元素抢占。

visibility:hidden | visible

display:none | block | inline

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

  1. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  2. visibility: hidden 和 display: none的区别

    相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...

  3. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  4. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  5. 再谈visibility:hidden和display:none

    之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...

  6. 为什么要用visibility:hidden;代替display:none;？

    为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...

  7. What is the difference between visibility:hidden and display:none?

    What is the difference between visibility:hidden and display:none? 答案1 display:none means that the t ...

  8. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  9. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

随机推荐

  1. Angular----安置物流项目前端框架经验总结

    一.架构方面 (一) Angular框架有service .controller层: 在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器) ...

  2. Educational Codeforces Round 40 I. Yet Another String Matching Problem

    http://codeforces.com/contest/954/problem/I 给你两个串s,p,求上一个串的长度为|p|的所有子串和p的差距是多少,两个串的差距就是每次把一个字符变成另一个字 ...

  3. 我的json

    { "firstName":[ "xMan" ], "members":[ { "name":"X教授&quo ...

  4. nyoj117——树状数组升级版（树状数组+离散化）

    求逆序数 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中 ...

  5. Python 序列化pickle/cPickle模块整理

    Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给其他人.你会怎么做?这取决于你想要怎么保存,怎么重用,发送给谁.很多游戏允许你在退出的时候保存进度,然后你再 ...

  6. ZOJ 1609 Equivalence（状压+dfs减枝）

    ZOJ Problem Set - 1609 Equivalence Time Limit: 5 Seconds      Memory Limit: 32768 KB When learning m ...

  7. MySQL Batched Key Access

    Batched Key Access是MySQL 5.6 版本中的新特性,是一种用户提高表join性能的算法.[Batched Key Access]       对于多表join语句,当MySQL使 ...

  8. new/delete工作机制

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  9. 如何自定义FileZilla编辑文件的默认打开方式

    看一下设置: 原来是人家默默认不给我们提示 改一下: 还是不行,还是跳到网页去了 还是不行 这样就好了...

  10. ES6入门之对象扩展

    ES5对象(超类)原有: 属性:construct构造函数 方法: object.hasOwnProperty( propertyName ) //检测是否有一个本地的属性而不是继承的,返回boole ...