<!DOCTYPE html>
<html>
<head>
<style>
.imgbox { float: left;
text-align: center;
width: 120px;
border: 1px solid gray;
margin: 4px;
padding: 6px;
}
button { width: 100%;
}
</style>
</head>
<body>
<h3>display:none 和 visibility: hidden 的区别</h3>
<p><strong>visibility:hidden</strong> 隐藏元素，但它仍然占用布局空间。</p>
<p><strong>display:none</strong> 从文档中删除元素。 它不占用任何空间。</p>
<div class="imgbox" id="imgbox1">Box 1<br>
<img src="img_5terre.jpg" alt="Italy" style="width:100%">
<button onclick="removeElement()">移除</button>
</div>
<div class="imgbox" id="imgbox2">Box 2<br>
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<button onclick="changeVisibility()">隐藏</button>
</div>
<div class="imgbox">Box 3<br>
<img src="img_forest.jpg" alt="森林" style="width:100%">
<button onclick="resetElement()">全部重置</button>
</div>
<script>
function removeElement() { document.getElementById("imgbox1").style.display = "none";}
function changeVisibility() {