`
单刀刑天
  • 浏览: 40145 次
文章分类
社区版块
存档分类
最新评论

Visibility 属性的用法

 
阅读更多

英语单词visibility:名词,意为能见度;明显性;视程;(常复数)可见物。CSS中的“visibility”属性的作用是规定元素是否可见。

 

Visibility 属性的用法

Visibility 属性共有四个可用的值(visiblehidden、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属性

    在Android开发中,`visibility`属性是控制UI组件(如按钮、文本视图等)是否在屏幕上显示的关键属性。它提供了三个可能的值,每个值都有特定的效果: 1. **可见(Visible)**:当`visibility`设置为`visible`时,...

    WPF的bool2Visibility转换器使用

    - **绑定到UI元素**:然后,你可以将转换器应用到需要转换的元素的`Visibility`属性上: ```xml , World!" Visibility="{Binding Path=IsVisible, Converter={StaticResource boolToVisibilityConverter}}" /&gt; `...

    DataGrid_Column_Visibility_Binding

    在我们的例子中,我们要改变DataGrid列的Visibility属性,这通常涉及到Boolean到Visibility转换器。 Visibility枚举是WPF中定义的,有两个成员:Visible(表示元素可见)和Collapsed(表示元素不可见但占用的空间...

    CSS:Visibility和Display属性的比较.pdf

    首先,`visibility`属性主要用来切换元素的可见状态。它有四个可能的值:`visible`(默认,元素可见)、`hidden`(元素不可见,但保留其占用的空间)、`collapse`(主要用于表格,移除元素但不影响布局)和`inherit`...

    JS中style.display和style.visibility的区别实例说明.docx

    在上面的实例中,divContent1 元素使用 style.display = "none" 隐藏,divContent2 元素使用 style.visibility = "hidden" 隐藏。虽然它们都被隐藏了,但是它们的行为却不同。divContent1 元素将完全消失,不占据...

    CSS属性查询以及用法

    CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-family:定义文本的字体系列...

    对比: display, visibility(有代码)

    在网页设计和开发中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先,`display` 属性主要用于...

    前端项目-visibility.js.zip

    这个库是对Page Visibility API的封装,简化了API的使用。它提供了一种更加友好的API接口,使得开发者不需要直接处理复杂的事件监听和状态检查。例如,`visibilityjs`可能提供了如下的一些方法: 1. `isVisible()`:...

    css中display和visibility的用法和区别介绍

    在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...

    CSS隐藏元素 display visibility opacity的区别.docx

    在CSS中,隐藏元素的方法主要有三种:`display:none`、`visibility:hidden`和`opacity:0`,它们各自有不同的特点和适用场景。 1. `display:none`:此属性会使元素完全从页面布局中消失,不占据任何空间。元素及其...

    JAVASCRIPT style 中visibility和display之间的区别

    首先,visibility属性控制元素是可见还是隐藏。当visibility设置为"visible"时,元素显示在页面上;而设置为"hidden"时,元素虽然仍然存在于DOM结构中,但不会在页面上显示出来。最重要的一点是,当元素设置为隐藏...

    通过display或visibility来实现HTML元素的显示与隐藏

    而使用visibility属性控制的元素,即便在隐藏状态下,仍然会占据原来的空间。 总结来说,display属性通过从文档流中完全移除元素来控制显示与隐藏,适用于当你不希望元素占用任何页面空间时使用。而visibility属性...

    display none是什么意思?.docx

    Display None 是什么意思? Display None 是 CSS 中的一个属性值,它的...Display None 是一个非常有用的 CSS 属性,它可以实现元素的隐藏和显示,但需要根据实际情况选择合适的使用方法,以避免出现不必要的错误。

    jQuery可见性过滤器:hidden和:visibility用法实例

    在本文中,我们将详细介绍jQuery中的可见性过滤器:hidden和:visibility的用法,并结合实例来分析它们的功能和使用技巧。 首先,我们需要明确隐藏(hidden)和可见(visible)状态的区别: - hidden(隐藏)状态...

    css-content-visibility:新CSS属性内容可见性|| 性能测试示例

    本文将深入探讨`content-visibility`属性的含义、用法及其在实际场景中的性能测试示例。 `content-visibility`属性是CSS的一个实验性特性,旨在改善大型、动态或复杂内容的性能。它允许开发者隐藏或控制元素的内容...

    用js实现控件的隐藏及style.visibility的使用

    本示例主要讲解如何使用JavaScript来控制控件的隐藏与显示,特别是通过设置`style.visibility`属性来实现这一功能。下面我们将深入探讨这个知识点。 首先,`style.visibility`属性是CSS中用于控制元素可见性的属性...

    A.4.2 属性和方法(WPF).zip

    三、XAML与属性、方法的使用 XML标记语言(XAML)是WPF的主要设计工具,它使得通过声明式语法创建UI变得简单。在XAML中,可以直接定义元素的属性和方法: ```xml 点击我" Click="Button_Click" /&gt; ``` 这段代码...

    通过display或visibility来隐藏html元素

    为了实现这一功能,CSS提供了display和visibility两个...以上是关于display和visibility属性在隐藏HTML元素时的区别和使用方法。在实际开发中,开发者可以根据具体需求选择合适的属性进行操作,以达到预期的页面效果。

Global site tag (gtag.js) - Google Analytics