CSS可见性属性示例教程

最新推荐文章于 2024-06-12 12:02:32 发布

cunjiu9486

最新推荐文章于 2024-06-12 12:02:32 发布

阅读量565

点赞数

文章标签： css python java html javascript ViewUI

原文链接：https://www.poftut.com/css-visibility-property-tutorial-with-examples/

版权

本文详细介绍了CSS的visibility属性，用于控制HTML元素的可见性。通过设置为`visible`、`hidden`和`collapse`，可以实现元素的显示、隐藏和折叠。`hidden`值会隐藏元素但保留空间，`collapse`则适用于表格，移除行或列的同时节省空间。`display`属性与`visibility`不同，它会完全移除元素。了解这些概念有助于优化网页布局。

摘要由CSDN通过智能技术生成

The CSS provides the visibility attribute in order to show, collapse and hidden some HTML elements. Visibility element usage is very simple where we have to provide values like visible, hidden , collapse. The visibility CSS attribute is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge, and mobile versions.

CSS提供visibility属性，以显示，折叠和隐藏一些HTML元素。可见性元素的用法非常简单，我们必须提供visible ， hidden ， collapse等值。所有主要浏览器(如Google Chrome，Mozilla Firefox，Opera，Internet Explorer，Microsoft Edge和移动版本)均支持可见性CSS属性。

句法 (Syntax)

CSS visibility attribute has the following syntax.

CSS可见性属性具有以下语法。

visibility: VALUE;

`visibility` is the attribute we will use.
可见性是我们将要使用的属性。
`VALUE` is the visibility attribute value that can be visible, hidden and collapse.
“ VALUE”是可见性属性值，可以显示，隐藏和折叠。

可见性属性可见值 (Visibility Attribute Visible Value)

We can make an HTML element visible by setting the visible value to the visibility CSS attribute like below. The visible value is the default value for the visibility attribute. So if the element is visible we do not have to set the visible value to make it visible.

我们可以通过将visible值设置为visible visibility CSS属性来使HTML元素可见，如下所示。 visible值是visibility属性的默认值。因此，如果元素是可见的，则不必设置visible值即可使其可见。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {visibility:visible;}
</style>
</head>
<body>

<h1>This Is The 1st Header</h1>
<h1>This Is The 2st Header</h1>
<h1>This Is The 3st Header</h1>
<h1>This Is The 4st Header</h1>
<h1>This Is The 5st Header</h1>
<h1>This Is The 6st Header</h1>
<h1>This Is The 7st Header</h1>
<h1>This Is The 8st Header</h1>


</body>
</html>

可见性属性隐藏值(Visibility Attribute Hidden Value)

We can also make some elements invisible or hidden by using the visibility attribute. We will set the value hidden for the visibility attribute like below. In the following example, we will set the h1 elements invisible.

我们也可以做一些元素不可见或隐藏使用visibility属性。我们将为可见性属性设置hidden值，如下所示。在下面的示例中，我们将h1元素设置为不可见。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {visibility:hidden;}
</style>
</head>
<body>

<h1>This Is The 1st Header</h1>
<p>This Is The 2st Header</p>
<h1>This Is The 3st Header</h1>
<p>This Is The 4st Header</p>
<h1>This Is The 5st Header</h1>
<p>This Is The 6st Header</p>
<h1>This Is The 7st Header</h1>
<p>This Is The 8st Header</p>


</body>
</html>

We can see from the screenshot that the H1 elements are hidden but their places and areas do not collapse.

从屏幕截图中我们可以看到，H1元素被隐藏了，但是它们的位置和区域没有崩溃。

可见性属性折叠 (Visibility Attribute Collapse)

The visibility attribute also accepts the collapse value which can be useful for table rows and columns. By using this value the given row or column can be removed and space can be used for other elements. If the collapse value is used for other elements it will assumed as hidden.

可见性属性还接受collapse值，该值对于表的行和列很有用。通过使用此值，可以删除给定的行或列，并且可以将空间用于其他元素。如果折叠值用于其他元素，则将其视为hidden 。

<!DOCTYPE html>
<html>
<head>
<style>

table, td {
  border: 1px solid black;
}

tr.collapse {
  visibility: collapse;
}

</style>
</head>
<body>
NORMAL TABLE
<table>
  <tr>
    <td>İsmail</td>
    <td>Baydan</td>
  </tr>
  <tr>
    <td>Ahmet Ali</td>
    <td>Baydan</td>
  </tr>  
  <tr>
    <td>Elif Ecrin</td>
    <td>Baydan</td>
  </tr>
</table>
<br><br>
COLLAPSED TABLE
<table>
  <tr>
    <td>İsmail</td>
    <td>Baydan</td>
  </tr>
  <tr class="collapse">
    <td>Ahmet Ali</td>
    <td>Baydan</td>
  </tr>  
  <tr>
    <td>Elif Ecrin</td>
    <td>Baydan</td>
  </tr>
</table>

</body>
</html>

继承 (Inherit)

If the HTML document is designed in a hierarchical manner and we want to use the visibility attribute from the parent elements we can use inherit value or keyword which will get the parents value and set for the current element.

如果HTML文档是以分层方式设计的，并且我们希望使用父元素的可见性属性，则可以使用inherit值或关键字，该值将获取父值并为当前元素设置。

可见性与显示属性 (Visibility vs Display Attribute)

There is also the attribute named display is functioning similar to the visibility attribute. But there is important difference. Visibility attribute will only hide the given element but the space it takes will be reserved on the other side display attribute will remove the given element completely. In the following example, we will set the h2 element display to the none which will be removed completely where the h1 elements will be only set invisible or hidden where their space is preserved.

还有一个名为display的属性，其功能类似于可见性属性。但是有重要的区别。可见性属性将仅隐藏给定元素，但其占用的空间将保留在另一侧， display属性将完全删除给定元素。在下面的示例中，我们将h2元素显示设置为none ，在保留h1元素的位置仅将其设置为不可见或隐藏的情况下，将完全删除h2元素的显示。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {visibility:hidden;}
h2 {display:none;}
</style>
</head>
<body>

<h1>This Is The 1st Header</h1>
<p>This Is The 2st Header</p>
<h2>This Is The 3st Header</h2>
<p>This Is The 4st Header</p>
<h1>This Is The 5st Header</h1>
<p>This Is The 6st Header</p>
<h2>This Is The 7st Header</h2>
<p>This Is The 8st Header</p>


</body>
</html>

翻译自: https://www.poftut.com/css-visibility-property-tutorial-with-examples/

cunjiu9486

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS可见性属性示例教程

The CSS provides the visibility attribute in order to show, collapse and hidden some HTML elements. Visibility element usage is very simple where we have to provide values like visible, hidden , colla...
复制链接

扫一扫