Visibility 属性指定元素是可见还是隐藏。
您可以使用该visibility属性来指定元素是否可见。此属性可以采用下表中列出的以下值之一:
值 | 描述 |
---|---|
visible | 默认值。该框及其内容是可见的。 |
hidden | 该框及其内容是不可见的,但仍会影响页面的布局。 |
collapse | 该值导致整个行或列从显示中删除。此值用于行,行组,列和列组元素。 |
inherit | 指定可见性属性的值应从父元素继承,即采用与其父元素相同的可见性值。 |
visibility: collapse;但是,样式规则会删除内部表格元素,但不会以任何其他方式影响表格的布局。表元素通常占用的空间将由随后的同级填充。
注意:如果visibility: collapse;为其他元素(而不是表元素)指定了样式规则,则其行为与相同hidden。
CSS display 与 visibility属性看起来似乎是一回事,但实际上它们是完全不同的,并且常常使Web开发的新特性感到困惑。
visibility: hidden;隐藏元素,但是它仍然占用布局中的空间。如果隐藏框的子元素的可见性设置为“可见”,则它们将是可见的。
display: none;关闭显示并从文档中完全删除该元素。即使它的HTML仍在源代码中,它也不占用任何空间。即使所有子元素的显示属性均设置为none,也将关闭其显示。
Visibility 属性共有四个可用的值(visible、hidden、collapse 和 inherit),但常用的值是 visible 和 hidden。
visibility: visible /* 元素可见,默认值 */ visibility: hidden /* 元素不可见,但仍然为其保留相应的空间 */ visibility: collapse /* 只对 table 对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */ visibility: inherit /* 继承上级元素的 visibility 值。 */
Display 属性的可用值有很多,但在这里我们只关注其中的几个值:block、none 和 inline
display: none /* 元素不可见,并且不为其保留相应的位置 */ display: block /* 表现为一个块级元素(一般情况下独占一行) */ display: inline /* 表现为一个行级元素(一般情况下不独占一行) */
以上可以看出,虽然 Visibility 和 Display 属性都可以隐藏一个元素,但它们之间的不同点在于visibility: hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而 display: none 则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。
另外,display: block 和 display: inline 的区别在于 block 元素会在页面中独占一行,而 inline 元素不会,有的对象默认为 block 元素,而有的对象则默认为 inline 元素,大家在使用时需要注意防止相同属性的重复定义。
Visibility 和 Display 属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用 visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。