一个最让你抓狂的问题，用过CSS这个函数，它都没出现过

2023-03-08 06:49:28

为何 CSS 隐藏元素后，屏幕仍显示元素？

在网页设计中，我们经常使用 CSS 来隐藏元素。然而，有时即使应用了 display: none; 样式，元素仍然可见。这种情况往往令人困惑，本文将深入探究其原因以及如何解决。

容器溢出

当元素的内容超出其容器的边界时，即使应用了 display: none;，该元素仍然会显示在屏幕上。这是因为 display: none; 仅隐藏元素本身，但不影响其内容。为了隐藏溢出的内容，我们需要设置容器的 overflow 属性。

使用 CSS 函数 overflow 控制屏幕内容

overflow 函数允许我们控制元素内容是否溢出容器。它有三个主要值：

visible： 允许内容溢出容器，即使内容超出边界。
hidden： 隐藏溢出内容，即使内容未超出边界。
scroll： 隐藏溢出内容，但在容器中显示滚动条。

如果需要隐藏溢出内容，可以使用 overflow: hidden;。如果需要让内容可见，即使它超出边界，可以使用 overflow: visible;。

overflow 的巧妙应用

overflow 函数在网页设计中有很多应用，包括：

创建可滚动区域： 使用 overflow: scroll; 创建允许用户滚动的区域，非常适合长文本或图像。
隐藏多余内容： 使用 overflow: hidden; 隐藏超出容器的内容，从而使页面整洁。
裁剪效果： 使用 overflow: clip; 创建裁剪效果，突出显示页面中的特定元素。

overflow 使用示例

<div style="width: 200px; height: 200px; overflow: hidden;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id rhoncus mauris. Nullam laoreet nisl ut orci tincidunt, eget feugiat odio ultrices. Proin semper velit id laoreet blandit. Phasellus vitae vulputate libero, nec tincidunt quam. Cras ac ornare mauris. Proin nec semper nisl. Maecenas iaculis tristique elit, ut rhoncus nunc mattis eu. Phasellus vulputate magna ac egestas iaculis.</p>
</div>

在以上示例中，我们创建了一个宽度和高度都为 200 像素的 div。overflow 属性设置为 hidden，这意味着超出 div 边界的文本将被隐藏。