隐藏div是指所选择的div不显示在页面上，但是隐藏后有两种效果
1.隐藏过后的div的位置还是被占用了
2.隐藏过后的div的位置没有被占用
下面看几种隐藏div的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border: 1px red solid;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="box"></div>哈哈哈哈
<script src="common.js"></script>
<script>
document.getElementById("btn").onclick = function () {
//隐藏div的三种方式
// document.getElementById("box").style.display = "none";// 不占位
// document.getElementById("box").style.visibility="hidden";//占位
// document.getElementById("box").style.opacity=0;//占位
document.getElementById("box").style.height="0px";
document.getElementById("box").style.border="0px red solid";//占位
}
</script>
</body>
</html>
来源：CSDN
作者：Sixology.
链接：https://blog.csdn.net/qq_44685099/article/details/103602451