大家知道，如果想让某一段代码在前台不显示，最简单的方法是用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. java 判断一个字符串中的数字：是否为数字、是否包含数字、截取数字

    题外话: JavaScript中判断一个字符是否为数字,用函数:isDigit(); 一.判断一个字符串是否都为数字 package com.cmc.util; import java.util.re ...

  2. 18.一篇文章，从源码深入详解ThreadLocal内存泄漏问题

    1. 造成内存泄漏的原因? threadLocal是为了解决对象不能被多线程共享访问的问题,通过threadLocal.set方法将对象实例保存在每个线程自己所拥有的threadLocalMap中,这 ...

  3. node-glob 匹配通配符

    1.https://www.cnblogs.com/liulangmao/p/4552339.html 2.https://github.com/isaacs/node-glob 3.https:// ...

  4. 让你的ansible飞起来

    一.SSH Multiplexing 1 配置 vim /etc/ssh/ssh_config Host * GSSAPIAuthentication yes # If this option is ...

  5. Chunky Monkey

    猴子吃香蕉可是掰成好几段来吃哦! 把一个数组arr按照指定的数组大小size分割成若干个数组块. 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; chunk([1,2,3,4 ...

  6. 016——数组（十六）usort uasort uksort

    <?php /*数组 usort uasort uksort */ //usort()通过自定义函数对数组进行排序,原数组索引不保留 /*$arr = array(5, 3, 7, 6, 4, ...

  7. Algorithm4.子数组求和贪心

    子数组求和最大问题 20131011 问题描述 一个数组中,有整数也有复数,求这个数组的所有子数组中,求和最大的值. 这是一个动态规划问题,乍看上去没有什么简单的方法,把所有的情况列出来就可以了,但是 ...

  8. Mysql 表锁定的问题

    下面的几个语句查询到,但如何定位到对应的进程,还需要学习这些表的结构. select * from information_schema.innodb_trx ## 当前运行的所有事务select * ...

  9. 重温ASP.NET WebAPI（一）初阶

    重温ASP.NET WebAPI(一)初阶   前言 本文为个人对WebApi的回顾无参考价值.主要简单介绍WEB api和webapi项目的基本结构,并创建简单地webaapi项目实现CRUD操作. ...

  10. bzoj4945

    题解: 一眼看过去还以为是3-sat 其实d只有8 那么我们可以枚举每一个x选择哪一个 然后再用2-sat处理 代码: #include<bits/stdc++.h> using name ...