大家知道，如果想让某一段代码在前台不显示，最简单的方法是用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. C# SQLite写入和读取DateTime类型

    很简单 1.不要相信网上大部分人说的话,比如存到int里 (ps:版本差距知道吗?) 2.nuget包下载最新版的sqlite 3.SQLite支持DateTime类型(图形化工具不会给提示无视它), ...

  2. Kotlin------流程控制语句

    流程控制语句是编程语言中的核心之一.可分为: 分支语句(if . when) 循环语句(for.while )和 跳转语句 (return . break .continue.throw)等. if表 ...

  3. 1-24-case流程控制和while循环语句的使用

    大纲: 1.while循环控制语句 while实战---批量添加规则用户 while实战---猜价格游戏 2.case流程控制语句和exit退出 exit实战---返回值测试 case实战---智能解 ...

  4. torch 深度学习(5)

    torch 深度学习(5) mnist torch siamese deep-learning 这篇文章主要是想使用torch学习并理解如何构建siamese network. siamese net ...

  5. Nginx1.8 安装说明

    安装Nginx .安装pcre cd /usr/local/src mkdir /usr/local/pcre tar zxvf pcre-8.36.tar.gz cd pcre-8.36 ./con ...

  6. js上传图片&预览（filereader）

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  7. Redis数据结构：字典（hash表）

    使用场景: # set person name "tom" # set person name "jerry" 1. 字典结构: 哈希表数据结构 typedef ...

  8. OC-NSArray

    一.认识数组 oc中可以把NSObject对象的子类放到数组这个集合中,但是int.float.double等基础数据类型需要先进行转换才可以存入数组. oc中数组以NS开头,其中分为可变数组和不可变 ...

  9. ios 第2天

    类的方法和实例的方法 -(void)runwithspeed:(int)speed and direction:(int)direction; 实例方法 -开头 运用对象调用 函数名为runwiths ...

  10. MoreEffectiveC++Item35 条款25 将constructor和non-member functions虚化

    1.virtual constructor 在语法上是不可将构造函数声明成虚函数,虚函数用于实现"因类型而异的行为",也就是根据指针或引用所绑定对象的动态类型而调用不同实体.现在所 ...