HTML 中有多种 display 属性，它们用来控制元素的显示方式。常用的 display 属性值及其作用如下：
- block：将元素显示为块级元素，即一个元素占据整个父容器的宽度并独占一行。
- inline：将元素显示为行内元素，即元素仅占据它的实际宽度，不会独占一行，可以和其他行内元素在同一行。
- inline-block：将元素显示为行内块级元素，即元素会占据它的实际宽度和高度，但是不会独占一行，可以和其他行内元素在同一行。
- none：将元素隐藏，即不占据空间，并且不会被屏幕阅读器和搜索引擎检索。
- flex：将元素显示为弹性盒子，即可以通过 flex 属性控制元素的位置和大小。
- grid：将元素显示为网格盒子，即可以通过 grid 属性控制元素的位置和大小。
- table、table-row、table-cell：将元素显示为表格或表格单元格。
HTML 中的 visibility 属性用于控制元素的可见性，从而影响元素在页面中的显示状态。visibility 属性的取值包括以下三种：
- visible（默认值）：元素可见，如果父元素或祖先元素具有 hidden 属性，则不会覆盖该属性。
- hidden：元素不可见，但仍占据页面上的空间。
- collapse：仅适用于表格行元素（tr），表示折叠该行的边框和内部元素，但不会从表格中移除该行，因此仍会占据页面上的空间。
两者的区别
通过设置 visibility 属性，可以对网页中的元素进行隐藏或显示操作，同时保留其在网页布局中的占位。注意，当元素的 display 属性值为 none 时，元素不仅不可见，同时也不占据页面上的空间。
<!DOCTYPE html>
<html>
<head>
<title>Display vs visibility</title>
<style>
.container {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
background-color: #f5f5f5;
}
.box {
width: 100px;
height: 50px;
background-color: #ffcc00;
border: 1px solid #ccc;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.hide {
display: none;
}
.invisible {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Display vs visibility</h2>
<p>点击下面的按钮可以切换两个元素的显示或隐藏状态：</p>
<button onclick="toggleDisplay()">Toggle display</button>
<button onclick="toggleVisibility()">Toggle visibility</button>
<div class="container">
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
</div>
<script>
function toggleDisplay() {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
if (box1.classList.contains("hide")) {
box1.classList.remove("hide");
box2.classList.remove("hide");
} else {
box1.classList.add("hide");
box2.classList.add("hide");
}
}
function toggleVisibility() {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
if (box1.classList.contains("invisible")) {
box1.classList.remove("invisible");
box2.classList.remove("invisible");
} else {
box1.classList.add("invisible");
box2.classList.add("invisible");
}
}
</script>
</body>
</html>
通过点击页面中的两个按钮，我们可以切换盒子的隐藏或不可见状态。可以看到，当我们将元素的 display 属性设置为 none 时，它们不仅被隐藏了，而且元素所占用的空间也消失了，不再占据页面布局空间。而当我们将元素的 visibility 属性设置为 hidden 时，元素仍然占据页面上的空间，只是不显示而已，不会对页面布局产生影响。
