css属性opacity: 0；display: none；visibility: hidden的区别；隐藏页面中的某个元素的方法有哪些？rgba()和opacity的透明效果有什么不同?

css属性opacity: 0；display: none；visibility: hidden的区别

opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。

区别可以从结构、继承、性能来了解

opacity: 0;
visibility: hidden;
display: none;

结构

opacity: 0;
会让元素完全从渲染树（dom）中消失，渲染的时候不占据任何空间, l可以点击。

visibility: hidden;
不会让元素从渲染树（dom）消失，渲染元素继续占据空间，只是内容不可见，不能点击。

display: none;
不会让元素从渲染树（dom）消失， 渲染的时候不占据任何空间，只是内容不可见，不能点击。

继承

opacity: 0; 和 display: none;
是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。

visibility: hidden;
是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能

opacity: 0;
修改元素会造成文档重排,读屏器不会读取display: none元素内容，性能消耗较大。

visibility: hidden;
修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容。

display: none;
修改元素会造成重绘，性能消耗较少。

隐藏页面中的某个元素的方法有哪些？

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（读屏软件依赖于可访问性树）。

为了消除它们之间的歧义，我们将其归为三大类：

完全隐藏： 元素从渲染树中消失，不占据空间。
视觉上的隐藏： 屏幕中不可见，占据空间。
语义上的隐藏： 读屏软件不可读，但正常占据空。

完全隐藏
1、display 属性

display: none;

2、hidden 属性
HTML5 新增属性，相当于 display: none

<div hidden>div>

3、 opacity 属性

opacity: 0;

视觉上的隐藏
1、设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。

position:absolute;
left: -99999px;

2、设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。

position: relative;
left: -99999px;
height: 0

3、设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;
height: 0;

语义上隐藏
1、aria-hidden 属性
读屏软件不可读，占据空间，可见。

<div aria-hidden="true"></div>

rgba()和opacity的透明效果有什么不同?

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素， 以及元 素内的所有内容的透明度，而 rgba() 只作用于元素的颜色或其背景色 。 ( 设置 rgba 透明的元素的子元素不会继承透明效果!)

总结

opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。

持续学习总结记录中，回顾一下上面的内容：
css属性opacity: 0；display: none；visibility: hidden的区别；隐藏页面中的某个元素的方法有哪些？rgba()和opacity的透明效果有什么不同?