cssvisibility

CSS的visibility属性是用来控制元素在页面上的显示和隐藏的。它有两个可选值：visible和hidden。

visible是默认值，表示元素是可见的。当设置为hidden时，元素将被隐藏，但仍会占据页面的空间。这就意味着，元素虽然被隐藏了，但是其他元素仍然会认为它仍然占据着原来的位置，并且其它元素将会根据隐藏的元素进行布局。这与display属性的none值不同，none会将元素从页面中完全移除，即使不占据空间。

visibility属性可以通过CSS样式表中的class和id选择器来设置，也可以通过JavaScript动态操作。

在讲解visibility属性的使用之前，我们需要提到一个相关的属性：opacity。opacity控制元素的透明度，其可选值为0~1之间的小数，其中0表示完全透明，1表示完全不透明。不同于visibility属性，设置元素透明度为0之后，元素将不可见，也不会占据空间。

visibility属性通常在以下场景中使用：

1. 控制元素的显示和隐藏

通过设置visibility为hidden，可以隐藏元素。例如，可以通过以下代码隐藏一个id为element的元素：

```css

#element {

visibility: hidden;

}

```

2. 创建通过键盘或鼠标事件触发的交互效果

通过JavaScript动态操作visibility属性，可以在用户交互时显示或隐藏元素，从而实现一些动态的效果。例如，可以根据用户鼠标移到某个区域上，显示一个提示框：

```html

```

3. 遮罩层效果

通过设置一个半透明的遮罩层元素，并将其z-index属性设置为比页面上其他元素的z-index值更大，可以实现遮罩层效果。设置遮罩层的visibility属性为hidden，可以在一开始隐藏遮罩层，并通过JavaScript动态操作visibility属性来显示或隐藏遮罩层。

```css

#overlay {

position: fixed;

top: 0;

left: 0;

width: *;

height: *;

background: rgba(0

0

0

0.5);

z-index: 9999;

visibility: hidden;

}

```

```javascript

document.getElementById("show-overlay").addEventListener("click"

function() {

document.getElementById("overlay").style.visibility = "visible";

});

document.getElementById("hide-overlay").addEventListener("click"

function() {

document.getElementById("overlay").style.visibility = "hidden";

});

```

上述代码中，点击id为show-overlay的元素时，会显示遮罩层；点击id为hide-overlay的元素时，会隐藏遮罩层。

总结：

CSS的visibility属性可以控制元素在页面上的显示和隐藏。它有两个可选值：visible和hidden。visibility:hidden可以隐藏元素，但仍占据空间；visibility:visible则表示元素是可见的。visibility属性可以通过CSS样式表中的class和id选择器来设置，也可以通过JavaScript动态操作。通过使用visibility属性，可以实现一些交互效果、遮罩层效果等。