css - 可见性:hidden and display:none?有什么区别

Question

CSS 规则 visibility:hidden 和 display:none 都会导致元素不可见。这些是同义词吗？

Answer 1

display:none 表示相关标签根本不会出现在页面上(尽管您仍然可以通过 dom 与其交互)。其他标签之间不会为其分配空间。

visibility:hidden的意思是和display:none不同，标签是不可见的，但是在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

例如:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

将 [style-tag-value] 替换为 display:none 结果:

test |   | test

将 [style-tag-value] 替换为 visibility:hidden 结果:

test |                        | test