javascript中 visibility和display区别在哪

Posted 2021-12-11 blogst

差异：

1。占用的空间不同。

可见性占用域空间，而显示不占用。

可见性和显示可以隐藏页面，例如：

将元素显示属性设置为block将在该元素后换行。

将元素显示属性设置为inline将消除元素换行。

将element display属性设置为none可隐藏元素内容而不占用域空间。

将“元素可见性”属性设置为“隐藏”，以隐藏元素内容，但占用域中的空间。

将“元素可见性”属性设置为“可见”，以显示元素内容。

2。对正常文档流的不同响应。

如果要隐藏某个元素，但在页面上为该元素留有空间，则应使用visibility:hidden。如果要在用空白填充其他内容时隐藏元素，则应使用display:none。

实际上，我发现人们更倾向于使用显示属性（我相信这也是大多数人的习惯）。当你决定隐藏一个显示元素：没有，你必须知道其他内容会填充那个元素留下的空白，从而改变页面的布局。

 

扩展数据

有时我们通过隐藏关键字来欺骗SEO，但不是使用可见性：隐藏和显示：无，我们应该设置关键字的颜色与背景色相同，或者关键字的大小非常小，这样访问者就找不到它们。

有些人担心可见性的使用：隐藏和显示：没有，因为他们害怕蜘蛛的排斥。实际上，通过元素可见性的转换，可以获得许多漂亮的效果。

搜索引擎也理解这种方法（事实上，搜索引擎往往忽略CSS），所以如果你的目标不是欺骗搜索引擎，你可以安全地使用可见性：隐藏和显示：无隐藏内容。