display:none; vs visibility:hidden; - CSS 元素隐藏的区别

"display:none;"和"visibility:hidden;"是CSS属性，用于控制元素在页面上的显示与隐藏。它们的区别在于：\n\n1. display:none;：将元素完全从页面中删除，不占据任何空间，也不会对其他元素产生影响。元素被隐藏后，无法通过点击或其他方式触发。可以通过修改CSS样式或使用JavaScript来再次显示元素。\n\n2. visibility:hidden;：将元素隐藏，但仍然占据相应的空间。元素被隐藏后，仍然会对其他元素产生影响，即其他元素会以它的位置来布局。元素仍然可以通过点击或其他方式触发。可以通过修改CSS样式或使用JavaScript来再次显示元素。\n\n总结：\n- display:none;会将元素完全从页面中删除，而visibility:hidden;仅仅是隐藏元素。\n- display:none;隐藏的元素不会占据空间，而visibility:hidden;隐藏的元素仍然占据空间。\n- display:none;隐藏的元素无法被点击或触发，而visibility:hidden;隐藏的元素仍然可以被点击或触发。\n- display:none;隐藏的元素需要通过修改CSS样式或使用JavaScript来再次显示，而visibility:hidden;隐藏的元素可以通过修改CSS样式或使用JavaScript来再次显示。