CSS body 标签溢出 (auto, visible)

在本文中，我们将介绍CSS body标签的溢出属性，即如何控制网页内容在超出body标签范围时如何显示。我们将重点讨论两个属性：overflow和visibility，并提供示例帮助你更好地理解这些属性的用法和效果。

阅读更多：CSS 教程

什么是溢出属性(overflow)？

当网页内容超出容器尺寸时，溢出就发生了。CSS的overflow属性用于控制当内容溢出容器时的表现方式。它有四个可选值：visible、hidden、scroll、auto。

visible：默认值，超出的内容会显示在容器之外，不会剪切或隐藏。
hidden：超出的内容会被剪切隐藏，不会显示在容器之外。
scroll：显示滚动条，无论内容是否溢出。如果内容没有超出容器，滚动条处于禁用状态。
auto：根据内容是否溢出决定显示滚动条。如果内容超过容器尺寸，滚动条会启用。

下面是一个示例，同时使用了不同的overflow属性值：

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: visible;
  }

  .hidden {
    overflow: hidden;
  }

  .scroll {
    overflow: scroll;
  }

  .auto {
    overflow: auto;
  }
</style>

<div class="container">
  <h1>Overflow Example</h1>
  <p>
    This is some content that exceeds the size of the container.
    When overflow is set to visible, the content will be displayed outside the container.
  </p>
</div>
<div class="container hidden">
  <h1>Overflow Example</h1>
  <p>
    This is some content that exceeds the size of the container.
    When overflow is set to hidden, the content will be clipped and won't be shown outside the container.
  </p>
</div>
<div class="container scroll">
  <h1>Overflow Example</h1>
  <p>
    This is some content that exceeds the size of the container.
    When overflow is set to scroll, a scrollbar will be displayed allowing users to scroll and view the hidden content.
  </p>
</div>
<div class="container auto">
  <h1>Overflow Example</h1>
  <p>
    This is some content that exceeds the size of the container.
    When overflow is set to auto, a scrollbar will be displayed only if the content overflows the container size.
  </p>
</div>

在上述示例中，我们定义了一个容器div，并设置了固定宽度和高度（200px）。每个容器都包含了标题和一段溢出的内容。根据不同的overflow属性值，内容的显示方式会有所不同。

从示例中可以看到，visible值允许内容显示在容器范围外，hidden值隐藏超出的内容，scroll值始终显示滚动条，而auto值则会根据内容是否超出决定是否显示滚动条。

可见性属性(visibility)的作用

与overflow属性不同，visibility属性用于控制元素是否可见。它有两个可选值：visible和hidden。

visible：默认值，元素可见。
hidden：元素不可见，但仍占据文档空间。

与overflow属性不同，visibility属性不会隐藏溢出的内容，而是直接影响元素的显示方式。

下面是一个使用visibility属性的示例：

<style>
  .content {
    background-color: tomato;
    color: white;
    padding: 10px;
    visibility: hidden;
  }

  .show {
    visibility: visible;
  }
</style>

<button onclick="toggleVisibility()">Toggle Visibility</button>
<div class="content">Hidden Content</div>

<script>
  function toggleVisibility() {
    var content = document.querySelector('.content');
    content.classList.toggle('show');
  }
</script>