visibility:hidden;与display:none;两者没有本质是的区别

"visibility:hidden;" 和 "display:none;" 都可以隐藏元素，但它们之间有一些本质的区别。

"visibility:hidden;" 只是将元素隐藏，但保留了元素在文档流中的位置，也就是说，元素仍然占据着空间。因此，如果使用 "visibility:hidden;"，虽然元素不可见，但其他元素仍然会按照它们原来的位置进行排列。

"display:none;" 则完全删除了元素，包括该元素在文档流中的位置。因此，如果使用 "display:none;"，元素不仅不可见，而且不会占用任何空间。

因此，两者的主要区别在于，使用 "visibility:hidden;" 时，元素仍然占用空间，而使用 "display:none;" 时，元素不占用任何空间。

相关问题

visibility: hidden ，opacity display:none

这三个CSS属性都可以用于隐藏元素，但有一些区别：

1. `visibility: hidden`：元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。

2. `opacity: 0`：元素透明度为0，即元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。

3. `display: none`：元素不可见，且不占用布局空间，即元素在DOM中不存在，也不能通过JavaScript让其可见，要让其重新出现，必须更改CSS属性或通过JavaScript重新创建元素并添加到DOM中。

因此，在使用这些属性时，需要根据实际需求进行选择。如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。

下列说法正确的是() display:none;不为被隐藏的对象保留其物理空 visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明 visibility:hidden;产生reflow和repaint visibility:hidden;与display:none;两者没有本质上的区别

正确的说法是：`visibility:hidden;`所占据的空间位置仍然存在,仅为视觉上的完全透明。`visibility:hidden;`不会产生reflow和repaint，而`display:none;`会使元素不占据空间位置，并且会引起reflow和repaint。`visibility:hidden;`和`display:none;`的区别在于前者在视觉上是隐藏的但是仍然占据空间位置，后者在视觉上和空间上都被隐藏了。