你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

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

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

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

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

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

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

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

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

  5. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  6. 个人收集(转载)CSS中 display:none和visibility:hidden的区别

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

  7. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  8. display:none和visibility:hidden的区别?

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

  9. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

随机推荐

  1. Cyber-Ark spring mvc @autowired

    我们帮助中国平安改进他们重要系统的特权帐号密码管理,提供给他们一个“统一的,集中的,安全的”特权帐号密码管理解决方案.完全满足平安信息安全部对“特权帐号生命周期管理”的理解和需求,而且关键组件的高可用 ...

  2. Java50道经典习题-程序38 求字符串长度

    题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. import java.util.Scanner; public class Prog38 { public stat ...

  3. Grideview总结

    http://www.cnblogs.com/sufei/archive/2010/03/27/1698590.html

  4. c# 创建XML文档,解析XML文档

    1.静态函数 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  5. Python3中简单的迭代器程序

    1.迭代器程序(实现菲比那次数列并且可以抛出与接收异常) def fib(max): n,a,b = 0,0,1 while n < max: #print(b) yield b a,b = b ...

  6. iOS开发之蓝牙使用-建立连接的

    1.大佬笔记 CSDN 2.代码 github

  7. How to compile a node file?如何编译一个节点文件?

    Ubuntu16.04,ros Kinetic 最近几次遇到的问题都是,给你一个写好的ros node文件,没有给你其他的东西,你如何编译它? 以从ros中提取rgb图像和深度图像为例,示例源代码ex ...

  8. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  9. Codeforces Round #534 (Div. 2) D. Game with modulo 交互题

    先二分一个区间,再在区间里面二分即可: 可以仔细想想,想明白很有意思的: #include<iostream> #include<cstdio> #include<alg ...

  10. Java基础笔记(十八)——多态

    多态表示同一个操作作用在不同对象时,会有不同的结果. 多态可分为编译时多态和运行时多态. 编译时多态:方法重载,编译时就可以确定到底调用哪个方法,可以被看做一个类中的方法多态性. 运行时多态:只有在运 ...