• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • visibility

    CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏<table>中的行或列。

    示例

    /* Keyword values */
    visibility: visible;
    visibility: hidden;
    visibility: collapse;
    
    /* Global values */
    visibility: inherit;
    visibility: initial;
    visibility: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持visibility

    语法

    visibility:visible| hidden| collapse

    取值

    • visible:元素正常显示。
    • hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。要注意若将其子元素设为visibility:visible,则该子元素依然可见。
    • collapse
      • 用于<table>行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间(与将display: none用于表格的行/列上的效果相当)。但是,仍会计算其他行和列的大小,就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列,而不强制重新计算整个表的宽度和高度。
      • 折叠的弹性项目被隐藏,他们将占用的空间被删除。
      • 对于 XUL 元素,元素的计算大小始终为零,而且通常会忽略影响大小的其他样式,尽管边距仍然有效。
      • 对于其他元素,折叠处理与隐藏相同。

    有些现代浏览器对visibility: collapse不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成visibility: hidden的效果。

    visibility:collapse会改变表格的布局,嵌套在其被折叠的单元格中的表格也会同样被折叠,除非专门为此嵌套表格指定visibility: visible

    实例

    p        { visibility: hidden; }   /* 隐藏段落                       */
    p.showme { visibility: visible; }  /* 只有 class 设为 showme 的才会显示*/
    tr.col   { visibility: collapse; } /* 折叠 class 设为 col 的行        */
    

    上篇:clear

    下篇:<position>