【css知识】display:none; opacity:0; visibility:hidden；的区别

原创

wx605879fdc8dae 2021-05-19 20:54:25 ©著作权

文章标签 css display:none 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者wx605879fdc8dae的原创作品，请联系作者获取转载授权，否则将追究法律责任

（1）display：none

不占空间，不能触发事件

（2）opacity：0

占据空间，可以触发事件

（3）visibility：hidden

占据空间，不能触发事件

上一篇：CSS3实现文字描边的2种方法

下一篇：【css知识】clip:rect()矩形裁剪功能

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

全新的 display 属性

1.display 多值语法介绍display 属性具有相当强大的功能，除了显示某个内容与页面上其他方框的关系是块级还是行内级外，它还能显示应用该属性的方框内部的格式上下文。为了更好地描述这种行为，display 类型被分为外部显示类型和内部显示类型两部分：外部显示类型：决定了主方框本身如何参与流程布局。内部显示类型：决定了其后代框的布局方式（被替换的元素除外，这一点比较复杂）

边距 Chrome 映射关系
count(0) 和count(*) 有什么区别

在 SQL 中，COUNT(0) 和 COUNT(*) 都用于计算表中行的数量，但它们之间有一些微妙的区别：COUNT(0)：COUNT(0) 是将 0 作为参数传递给 COUNT 函数的方式之一。实际上，COUNT(0) 并不会对查询结果集中的任何列进行计数，而是对传递的参数进行计数。因为传递的是一个固定的值 0，所以在计算时不需要访问表的数据，只需要统计返回的行数，因此在性

数据访问表结果集
软件测试/测试开发|作为测试工程师，必须掌握的CSS知识

简介上篇文章我们介绍了HTML的相关知识，作为web的三种重要文件资源之一，CSS也是我们作为测试工程师必须要有所了解的知识，比如我们在web测试工作中，CSS定位能够迅速帮我们定位到元素。本篇文章我们就来介绍一下作为测试工程师，我们需要掌握的CSS知识。CSSCSS（Cascading Style Sheets）即层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用

选择器 html CSS
display: none、visibility: hidden与opacity: 0的区别

文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充：其他隐藏元素的方法1. display: none、visibility: hidden与opacity: 0的区别display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表：表格的解读：display:none其实很好理解，只要记住设置该属性的元素并不会出现在渲染树中这一点就行了，那么其他的一些特性（行为）

子节点属性值删除节点 java 编程
CSS display:none和visibility:hidden区别

display:none和visibility:hidden 区别

display:none和visibil
visibility: hidden；与display:none；区别

* 设置visibility:hidden;该盒子消失，但是位置仍然保留（页面中也要占他本身大小的位置,） */

css css3 html 5e .net
display:none和visibility:hidden的区别？

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

网页布局前端开发
visibility:hidden 和 display:none 的区别

display:none估计大家再熟悉不过了，呵呵，至少我是再熟悉不过了。经常用到的CSS属性。对于visibility:hidden 不一定每个会写CSS的人都了解。幸好，我今天了解了。特跟大家分享一下。display:none 和 visibility:hidden 的共同点都是让这两个元素隐藏起来。但是display:none是完全隐藏，不占据空间了，而visibility:hidden虽然

visibility:hidden display:none CSS
display:none; 和 visibility:hidden; 的区别

display:none; 和 visibility:hidden; 都可以隐藏元素，不同的是，前者不会占用隐藏前的位置（即不影响布局了），而后者还是占着隐藏前的位置，元素只是“看不到”而已。

display visibility 隐藏元素
display:none;与visibility:hidden;的区别

display:none visibility:hidden 不占位占位不能继承能继承 c3的transition不支持 transition支持

qt
display:none和visibility:hidden的区别

display:none隐藏时不占位，当再次显示时会发生页面回流和重绘，visibility:hidden隐藏时占位，当再次显示时不会回流和重绘，所以display:none是彻底隐藏了，visibility:hidden的性能要高一些。 display:none不会被子元素继承，visibilit

其他
visibility: hidden与display:none的区别

要想了解visibility: hidden与display:none的区别，我们还是先来看看他们各自的定义及用法。 visi

换行符内联元素 CSS
display:none与visibility: hidden的区别

1.visibility: hidden/visible与dispaly：none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后不占据文档空间。后者隐藏后会占据文档空间。其实visibility: hidden并不是你想的这

动画效果微信 css
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击继承： display: none和opacity: 0：是非继承属性，子孙节点消失由...

经验分享
详解display:none和visibility: hidden的区别

本章的主要内容是利用CSS控制元素的“显隐”，说道显隐，之前其实已经提供了一些非常规的CSS方法，如clip，z-index，opacity等，本章我们来深入探究一下display:none和visibility: hidden折两个属性。1.display与元素的显隐对于一个display计算值是none的元素而言，该元素及其后代元素全部都被隐藏（请记住这个概念，等下对比下visibi...

经验分享
CSS魔法堂：display:none与visibility:hidden的恩怨情仇

前言还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完不占用原来的位置，而保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！深入我们

css javascript form表单
css 隐藏元素方法：display/visibility/opacity

css 隐藏元素方法：1.display: none/block; 2.visibility:hidden/visible; 3.opacity: 0/1;...

css html js 数据结构 css3
display:none、visibility:hidden，opacity:0三者区别

控制元素的显示与隐藏：区分display:none、visibility:hidden，opacity:0 ...

css javascript html
display：none 与 visibility：hidden 的区别

display:none 和 visibility:hidden都是隐藏元素 dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失 visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置区别 1.visibility 具有继承性，其子元 ...

重绘 css css3 延迟执行数据
display:none和visibility:hidden两者的区别

使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏如果给一个元素设置了display ...

css 页面布局前端开发 css3 阅读器
java 对接visionMaster javavidros

1、大多数情况下，对象在新生代Eden区中分配。当Eden区没有足够空间进行分配时，虚拟机将发起一次Minor GC2、大对象直接进入老年代。大对象指需要大量连续内存空间的Java对象，最典型的大对象就是那种很长的字符串以及数组。3、长期存活的对象将进入老年代。虚拟机采用分代收集的思想来管理内存，那么内存回收时就必须能识别哪些对象应放在新生代，哪些对象应放在老年代中。为了做到这一点，虚拟机给那

java 对接visionMaster java 内存分配虚拟机老年代
Android TV调用系统键盘 android tv remote control找不到电视

本帖最后由 MozhiTX 于 2020-6-11 09:55 编辑首先，根据小米电视4A 65寸ROOT方法帖子的方法，本人尝试了不下20次，一直启动到小米自带的Recovery，无法进入到Twry Recovery。就FQ出去看了看，发现4pda上也有不少遇到相同问题的人，不过好在找到了解决问题的方法！原因在与：进入官方Recovery，对应触发的adb命令为 adb r

Android TV调用系统键盘米4android6.0 root 重启上传 IP
events_statements_history_long 为空 long类型为空是什么值

1.数据类型简介c++中数据类型分为两种：预定义类型和自定义数据类型。预定义类型：整型（int 4个字节）字符型布尔型（b

整型数据类型变量名
java math做指数运算 java计算指数

文章目录前言接第三期：一、BMI具体指什么？二、技术准备（需要学习了解的技术）1.变量2.标识符2.基本符号3.数据类型4.数据类型转换5.运算符6.选择结构一、BMI如何计算总结前言本期我们讲一起学习Java语言的基本符号、基本数据类型和运算符，以及分支流程控制语句：接第三期：强化训练练习： Java区分大小写。 Java关键字是小写。编译Java程序的命令是javac 程序名.java。

java math做指数运算 java 开发语言 System 赋值
mysql并行查询为什么不默认开启数据库并行查询的缺点

为了提高性能,我们针对Oracle数据库本身提供了的方法或方案进行过不少的偿试主要包括: 共享服务器模式(MTS) 集群技术(Clustering),RAC 分区并行处理(主要是并行查询)Oracle提供的这些特性确

mysql并行查询为什么不默认开启服务器数据仓库集群技术

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯