我们有几种方式可以隐藏一个元素：
- CSS position绝对定位，使元素位于可视范围外
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- CSS display的值是none。
- CSS visibility的值是hidden
- CSS opacity的值是0
下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0
基本功能：
display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。visibility: hidden: 隐藏元素，但是占用与未隐藏时一样的空间。opacity=0: 只是透明度为100%，使元素隐藏，依然占据空间。
三者的区别：display: none | visibility: hidden | opacity=0
-
文档空间：
display: none：隐藏后的元素不占据任何空间，动态改变此属性时引起重排，
visibility: hidden：隐藏后的元素空间依旧保留，动态改变此属性时引起重绘，不会影响列表的计数；
opacity: 0会占据空间，只会产生重绘，不会影响列表的计数 -
属性继承：
display: none不会被子元素继承，元素设置该属性后，自身连同其子元素都会隐藏，即使在子元素上设置 display:block ，子元素也不会显示
visibility: hidden具有继承性，给父元素设置visibility:hidden;，子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible;，则子元素又会显示出来。
opacity: 0会被子元素继承，不能通过设置子元素的opacity: 1使其显示 -
事件绑定
display: none和visibility: hidden元素上绑定的事件无法触发
opacity: 0元素上绑定的事件可以触发 -
过渡动画：
transition对display: none和visibility: hidden无效; 对opacity: 0有效
区别验证：
- 文档空间 | 属性继承 | 事件绑定
<html>
<head>
<meta charset="UTF-8">
<title>display: none | visibility: hidden | opacity=0</title>
</head>
<body>
<p><strong>display:none;</strong></p>
<ol id="ul1" class="display">
<li id="1">第1个元素</li>
<li id="2" style="display:none;">
<p style="display:block;color:red;">
第2个li元素的子元素display:block
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<p><strong>visibility:hidden</strong></p>
<ol id="ul2" class="visibility">
<li id="1">第1个li元素</li>
<li id="2" style="visibility:hidden">第2个li元素
<p style="visibility: visible;color:red;">
第2个li元素的子元素visibility: visible
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<p><strong>opacity:0</strong></p>
<ol id="ul3" class="visibility">
<li id="1">第1个li元素</li>
<li id="2" style="opacity:0">第2个li元素
<p style="opacity:1;color:red;">
第2个li元素的子元素opacity:1
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<script>
var oUl1 = document.getElementById("ul1");
var oUl2 = document.getElementById("ul2");
var oUl3 = document.getElementById("ul3");
oUl1.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl1.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
oUl2.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl2.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
oUl3.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl3.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li，防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
</script>
</body>
</html>
- 过渡动画
<html>
<head>
<meta charset="UTF-8">
<title>过度属性</title>
<style>
.parent{
width: 100px;
height: 100px;
background-color: sandybrown;
opacity: 0;
transition: all 5s ease;
}
.parent:hover {
opacity: 1;
}
.child {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
</html>