如何用 CSS 确定元素在不面向屏幕时是否可见
CSS 不仅仅可以改变页面上元素的样式和布局，还有一项很强大的功能，那就是可以控制元素是否可见。在有些情况下，我们希望元素只在某些特定情况下可见，比如元素在屏幕的可见区域之外或者被其他元素遮盖时不可见，而在可见区域内或不被遮盖时才可见。这时，我们就可以借助 CSS 来精确地控制元素的可见性。
1. visibility属性
visibility 属性控制元素的可见性，它有两个可选值：visible 和 hidden 。当设置为 visible 时，元素可见；当设置为 hidden 时，元素不可见，但它仍存在于文档流中，仍会占用空间。
下面是一个简单的示例，展示了如何使用 visibility 属性控制元素的可见性：
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
上面的代码定义了两个类，分别使元素可见和不可见。我们可以将它们应用于 HTML 元素上，从而控制元素在页面上的可见性。
2. display属性
在某些情况下，我们可能希望元素在不可见时不仅不占用空间，而且完全不显示，比如在一个弹出式菜单被关闭时，菜单的所有项都应该被隐藏。这时，我们可以使用 display 属性。
display 属性控制元素的显示或隐藏，它有三个可选值：block、none 和 inline。当设置为 block 时，元素被显示为块级元素，占据一行或一块空间；当设置为 none 时，元素不可见且不占据空间；当设置为 inline 时，元素被显示为行内元素，只占据所需宽度的空间。
下面是一个简单的示例，展示了如何使用 display 属性控制元素的可见性：
.hidden {
display: none;
}
.visible {
display: block;
}
上面的代码定义了两个类，分别使元素不可见和可见。我们可以将它们应用于 HTML 元素上，从而控制元素在页面上的可见性。
3. clip-path属性
在某些情况下，我们可能需要精确地控制元素在页面上的可见区域，比如在一个轮播图中，我们只想显示图片的一个部分。这时，我们可以使用 clip-path 属性。
clip-path 属性可以定义一个剪裁路径，只有在路径内的部分才会显示，而在路径外的部分则会被裁剪掉。clip-path 属性的可选值很多，包括基本形状（如矩形、椭圆、圆等）和路径函数（如 polygon()、inset()、circle() 等）。
下面是一个简单的示例，展示了如何使用 clip-path 属性控制元素在页面上的可见区域：
.clip {
clip-path: polygon(0px 0px, 0px 100%, 50% 50%);
}
上面的代码定义了一个 class，它应用了一个剪裁路径，只有在路径内的部分才会显示。我们可以将它应用于一个元素上，从而控制元素在页面上的可见区域。
4. pointer-events属性
在某些情况下，我们可能希望元素在不可见时仍然可以接受鼠标事件，比如在一个弹出式菜单被关闭时，我们希望在菜单区域之外的其他区域点击时可以关闭菜单。这时，我们可以使用 pointer-events 属性。
pointer-events 属性控制元素是否接受鼠标事件，它有几个可选值，包括 auto、none、visiblePainted、visibleFill、visibleStroke、visible、painted、fill、stroke 和 all。当设置为 none 时，元素不接受鼠标事件；当设置为 all 时，元素接受所有鼠标事件。
下面是一个简单的示例，展示了如何使用 pointer-events 属性控制元素的鼠标事件：
.hidden {
pointer-events: none;
}
.visible {
pointer-events: all;
}
上面的代码定义了两个类，分别使元素不接受和接受鼠标事件。我们可以将它们应用于 HTML 元素上，从而控制元素的鼠标事件。
总结
上述是 CSS 控制元素是否可见的四种方式，它们分别是 visibility 属性、display 属性、clip-path 属性和 pointer-events 属性。每一种方式都有不同的应用场景，比如 visibility 属性适合控制元素的可见性，而 display 属性适合控制元素在不可见时是否占用空间。我们可以根据具体情况选择不同的方式，精确地控制页面上元素的可见性。