网页设计中的元素可见性

  • 2019-03-06 17:14:44
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

除了剪裁和溢出,网页设计人员还可以控制整个元素的可见性。

visibility

值:visible | hidden | collapse | inherit

初始值:visible

应用于:所有元素

继承性:有

计算值:根据指定确定

这个属性相当简单。如果元素设置为有visibility: visible,当然它就是可见的。

如果元素设置为visibility: hidden,则会置为“不可见”(按规范中的说法),处于不可见状态时,元素还是会影响文档的布局,就好像它还可见一样。换句话说,网站建设元素还在那里,只不过你看不见它。注意这与display: none有区别。对于后者,元素不仅不显示,还会从文档中删除,所以对文档布局没有任何影响。图10-37显示了一个文档,根据以下样式和标记,将其中一个段落设置为hidden:

em.trans {visibility: hidden; border: 3px solid gray; background: silver; margin: 2em; padding: 1em;}

<P>

This is a paragraph that should be visible. Lorem ipsum, dolor sit amec,<em class="trans">conseccetuer adipiscing elit, sed diam nonurany nibh </em> euisraod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

hidden元素中原本可见的部分(如内容、背景和边框)都会置为不可见。注意,这些空间还留在原处,因为元素仍是文档布局的一部分。只不过你看不到它。

还要注意,网页设计人员有可能将一个hidden元素的后代元素置为visible。这会使该后代元素正常出现,尽管其祖先元素(以及兄弟)是不可见的。为此,必须显式地声明后代元素为visible,因为visibility属性可以继承:

p.clear {visibility: hidden;}

p.clear era {visibility: visible;}

visibility: collapse值在CSS表显示中使用,这在下一章讨论。根据网站建设CSS2规范,如果用干非表元素,collapse与hidden含义相同。

当前文章标题:网页设计中的元素可见性

当前URL:http://www.lyjtt.cn/news/wzzz/element-visibility.html

上一篇:网页设计中的内容裁剪

下一篇:网页设计中的绝对定位

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)