一、常用方法的性能及区别
1.display:none
不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。具体表现如下：
1.DOM结构，浏览器不会渲染display:none的元素，不占据空间；
2.事件监听：无法进行DOM事件监听；
3.性能：动态改变此属性会引起重排，性能较差；
4.继承：不会被子元素继承，毕竟子类也不会渲染；
5.transition：transition不支持display。
2.visibility: hidden
使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。具体表现如下：
1.DOM结构：被渲染，但是被隐藏，会占据空间；
2.事件监听：无法进行DOM事件监听；
3.性能：动态改变此属性会引起重绘，性能较高；
4.继承：会被子元素继承，子元素可以通过设置visibility:visible来取消隐藏；
5.transition：visibility会立即显示，隐藏时会延时。
3.opacity: 0
与visibility: hidden相似，使对象在网页上不可见，但该对象在网页上所占的空间没有改变，但是可以进行DOM事件监听，visibility：hidden不可以,通俗来说就是看不见但是摸得着。具体表现如下：
1.DOM结构：透明度为100%，元素被隐藏，会占据空间；
2.事件监听：可以进行DOM事件监听；
3.性能：提升为合成层，不会引起重绘，性能较高；
4.继承：会被子元素继承，子元素并不能通过opacity:1来取消隐藏；
5.transition：opacity可以延迟显示和隐藏。
二、结合代码与页面解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS隐藏元素的方法及区别</title>
<style>
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
.div1 {
display: none;
}
.div2 {
visibility: hidden;
}
.div3 {
opacity: 0;
}
</style>
</head>
<body>
<div onclick="test('showContent')"></div>
<div class="div1" onclick="test('display: none;')"></div>
<div class="div2" onclick="test('visibility: hidden;')"></div>
<div class="div3" onclick="test('opacity: 0;')"></div>
</body>
</html>
<script>
function test(data) {
alert(data)
}
</script>
1、不添加隐藏方式
不添加隐藏
2、display:none
未保留物理空间，无法进行事件监听
display:none
3、visibility: hidden
保留物理空间，无法进行事件监听
visibility: hidden
4、opacity: 0
保留物理空间，可以进行事件监听
opacity: 0
opacity: 0
三、隐藏的拓展方法
（1）position
position:absolute 设置元素的position与left，top，bottom，right等，将元素移出至可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。
（2）transform
transform:rotatex(90deg)或 transform:rotateY(90deg)，与opacity: 0相似，但无法进行事件监听。
网友评论