display:none和visibility:hidden的区别是 ？
参考回答
display: none 和 visibility: hidden 都用于隐藏元素，但它们的行为不同：
display: none：会完全移除元素，包括其占据的空间。元素会从页面布局中消失，其他元素会重新排列。visibility: hidden：元素仍然占据空间，但不会被显示。其他元素不会重新排列，页面布局不受影响。
详细讲解与拓展
1. display: none
- 使用
display: none隐藏元素时，元素会被从页面布局中完全移除。它不仅不显示在页面上，而且还不会占据任何空间，其他元素会根据它的位置重新布局。
例子：
<div style="display: none;">This is hidden</div> <div>This is visible</div>在这个例子中，
<div>元素使用display: none隐藏，且不占据空间，因此第二个div会直接显示在页面上，前面的空间会被填补。
2. visibility: hidden
-
使用
visibility: hidden隐藏元素时，元素本身还是存在的，它会占据空间，但不可见。其他元素不会重新布局，它们仍然认为被隐藏的元素存在。例子：
<div style="visibility: hidden;">This is hidden</div> <div>This is visible</div>在这个例子中，
<div>元素虽然被隐藏，但它仍然占据空间。因此，第二个div元素会显示在页面上，但它的位置会留给被隐藏的元素，即元素仍然占有布局位置。
3. 区别总结：
display: none完全移除元素，影响页面布局，后续元素会重新排列。visibility: hidden只是隐藏元素，不影响页面布局，隐藏的元素仍然占据空间。
4. 常见的应用场景：
display: none常用于临时移除元素或动态显示/隐藏内容（例如，通过 JavaScript 来控制显示/隐藏菜单、弹窗等）。visibility: hidden通常用于需要保留元素空间但不显示的场景（例如，制作动画效果时，需要保持元素原有的位置和布局，但在某些阶段隐藏它）。
扩展：
有时，visibility: hidden 和 display: none 都会与 JavaScript 结合使用来进行动态交互。例如，可以使用 JavaScript 来动态切换 visibility 和 display 属性，以实现更复杂的界面效果。
总结来说，display: none 和 visibility: hidden 都可以用来隐藏元素，但它们对布局的影响不同，前者会影响布局，后者则不影响。根据实际需要选择合适的属性来实现设计效果。