词条 | visibility |
释义 | 英语单词visibility:名词,意为能见度;明显性;视程;(常复数)可见物。CSS中的“visibility”属性的作用是规定元素是否可见。 Visibility 属性的用法Visibility 属性共有四个可用的值(visible、hidden、collapse 和inherit),但常用的值是visible 和hidden。 值 描述 visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间 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 去隐藏内容。 |
随便看 |
百科全书收录4421916条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。