【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
CSS规则visibility:hidden和display:none都会导致元素不可见。 这些同义词是？
#1楼
display:none从布局流中删除元素。
visibility:hidden隐藏它但留下空间。
#2楼
display:none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与它进行交互）。 其他标签之间不会为其分配空间。
visibility:hidden表示与display:none不同，标记不可见，但在页面上为其分配了空间。 标记已呈现，它只是在页面上看不到。
例如：
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
用display:none替换[style-tag-value]导致：
test | | test
用visibility:hidden替换[style-tag-value]导致：
test | | test
#3楼
display: none完全从页面中删除元素，并且构建页面就像元素根本不存在一样。
Visibility: hidden了文档流中的空间，即使您无法再看到它。
这可能会也可能不会产生很大的不同，这取决于你在做什么。
#4楼
它们不是同义词 - display: none从页面流中删除元素，页面的其余部分就像它不存在一样流动。
visibility: hidden隐藏了视图中的元素，但不隐藏页面流，在页面上留下了空间。
#5楼
visibility:hidden对象仍占据页面的垂直高度。 使用display:none它被完全删除。 如果图像下方有文本并且您display:none ，则该文本将向上移动以填充图像所在的空间。 如果您执行可见性：隐藏文本将保留在同一位置。
来源：oschina
链接：https://my.oschina.net/stackoom/blog/3142161