英语单词visibility：名词，意为能见度；明显性；视程；(常复数)可见物。CSS中的“visibility”属性的作用是规定元素是否可见。
Visibility 属性的用法
Visibility 属性共有四个可用的值（visible、hidden、collapse 和inherit），但常用的值是visible 和hidden。
|
visible
|
默认值。元素是可见的。
|
|
hidden
|
元素是不可见的。
|
|
collapse
|
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间
会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
|
|
inherit
|
规定应该从父元素继承 visibility 属性的值。
|
浏览器支持
所有主流浏览器都支持 visibility 属性。但是，任何的版本的 Internet Explorer （包括 IE8）都不支持 "inherit" 和 "collapse" 属性值，而支持visible 和hidden值。
实例
<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h2.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">这里的内容是可见的</h1>
<h2 class="invisible">这里的内容是不可见的</h1>
</body>
</html>
在这个实例中，H1使用了CSS visibility:visible，因此它的内容可见，而H2使用了CSS visibility:hidden ，H2的内容则不可见。
Visibility和Display的区别
虽然 Visibility 和 Display 属性都可以隐藏一个元素，但它们之间的不同点在于 visibility： hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而 display： none 则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。
另外，display： block 和 display： inline 的区别在于 block 元素会在页面中独占一行，而 inline 元素不会，有的对象默认为 block 元素，而有的对象则默认为 inline 元素，大家在使用时需要注意防止相同属性的重复定义。
Visibility 和Display 属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none 。
在现实中我发现人们更多的倾向于使用display 属性（相信这也是大多数人的习惯）。当你决定用display：none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。
Visibility 对SEO 的影响
在SEO中有时我们会通过把堆砌的关键词隐藏而达到作**弊的目的，但不应该使用visibility：hidden 和display：none ，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。
有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden 和display：none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的，搜索引擎也理解这一做法（事实上搜索引擎往往忽略CSS），因此如果你的目的不是欺骗搜索引擎，你大可以放心地使用visibility：hidden 和display：none 去隐藏内容。
相关推荐
在Android开发中，`visibility`属性是控制UI组件（如按钮、文本视图等）是否在屏幕上显示的关键属性。它提供了三个可能的值，每个值都有特定的效果： 1. **可见（Visible）**：当`visibility`设置为`visible`时，...
- **绑定到UI元素**：然后，你可以将转换器应用到需要转换的元素的`Visibility`属性上： ```xml , World!" Visibility="{Binding Path=IsVisible, Converter={StaticResource boolToVisibilityConverter}}" /> `...
在我们的例子中，我们要改变DataGrid列的Visibility属性，这通常涉及到Boolean到Visibility转换器。 Visibility枚举是WPF中定义的，有两个成员：Visible（表示元素可见）和Collapsed（表示元素不可见但占用的空间...
首先，`visibility`属性主要用来切换元素的可见状态。它有四个可能的值：`visible`（默认，元素可见）、`hidden`（元素不可见，但保留其占用的空间）、`collapse`（主要用于表格，移除元素但不影响布局）和`inherit`...
在上面的实例中，divContent1 元素使用 style.display = "none" 隐藏，divContent2 元素使用 style.visibility = "hidden" 隐藏。虽然它们都被隐藏了，但是它们的行为却不同。divContent1 元素将完全消失，不占据...
CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签，以及其对应的属性和用法。 字体属性（Font） * font-family：定义文本的字体系列...
在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先，`display` 属性主要用于...
这个库是对Page Visibility API的封装，简化了API的使用。它提供了一种更加友好的API接口，使得开发者不需要直接处理复杂的事件监听和状态检查。例如，`visibilityjs`可能提供了如下的一些方法： 1. `isVisible()`:...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
首先，visibility属性控制元素是可见还是隐藏。当visibility设置为"visible"时，元素显示在页面上；而设置为"hidden"时，元素虽然仍然存在于DOM结构中，但不会在页面上显示出来。最重要的一点是，当元素设置为隐藏...
而使用visibility属性控制的元素，即便在隐藏状态下，仍然会占据原来的空间。 总结来说，display属性通过从文档流中完全移除元素来控制显示与隐藏，适用于当你不希望元素占用任何页面空间时使用。而visibility属性...
Display None 是什么意思？ Display None 是 CSS 中的一个属性值，它的...Display None 是一个非常有用的 CSS 属性，它可以实现元素的隐藏和显示，但需要根据实际情况选择合适的使用方法，以避免出现不必要的错误。
在本文中，我们将详细介绍jQuery中的可见性过滤器：hidden和：visibility的用法，并结合实例来分析它们的功能和使用技巧。 首先，我们需要明确隐藏（hidden）和可见（visible）状态的区别： - hidden（隐藏）状态...
本文将深入探讨`content-visibility`属性的含义、用法及其在实际场景中的性能测试示例。 `content-visibility`属性是CSS的一个实验性特性，旨在改善大型、动态或复杂内容的性能。它允许开发者隐藏或控制元素的内容...
本示例主要讲解如何使用JavaScript来控制控件的隐藏与显示，特别是通过设置`style.visibility`属性来实现这一功能。下面我们将深入探讨这个知识点。 首先，`style.visibility`属性是CSS中用于控制元素可见性的属性...
三、XAML与属性、方法的使用 XML标记语言（XAML）是WPF的主要设计工具，它使得通过声明式语法创建UI变得简单。在XAML中，可以直接定义元素的属性和方法： ```xml 点击我" Click="Button_Click" /> ``` 这段代码...
为了实现这一功能，CSS提供了display和visibility两个...以上是关于display和visibility属性在隐藏HTML元素时的区别和使用方法。在实际开发中，开发者可以根据具体需求选择合适的属性进行操作，以达到预期的页面效果。