CSS overflow属性-之路教程

语法

overflow: visible | hidden | scroll | auto | overlay | initial | inherit;

具有“可见”值的overflow属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow 属性示例</h2>
    <h3>overflow: visible</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
  </body>
</html>

具有“滚动”值的overflow属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow 属性示例</h2>
    <h3>overflow: scroll</h3>
    <p>经历过风雨，才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
  </body>
</html>

在以下示例中，应用的值会剪切内容以适合框。

具有“隐藏”值的overflow属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow 属性示例</h2>
    <h3>overflow: hidden</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
  </body>
</html>

带有“auto”值的overflow属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .scroll {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow: auto;
        margin-bottom: 10px;
      }
      .scroll-x {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow-x: auto;
        overflow-y: hidden;
        margin-bottom: 10px;
      }
      .scroll-y {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow-y: auto;
        margin-bottom: 10px;
      }
      .scroll>div {
        width: 400px;
        height: 50px;
        background: #ccc;
      }
      .scroll-y>div {
        width: 200px;
        height: 50px;
        background: #ccc;
      }
      .scroll-x>div {
        width: 400px;
        height: 50px;
        background: #ccc;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Example with Overflow Property</h1>
    <h2>overflow overflow scroll auto</h2>
    <div class="scroll">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll property</h2>
      </div>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
      </p>
    </div>
    <h2>overflow overflow-x auto</h2>
    <div class="scroll-x">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll-x property</h2>
      </div>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
      </p>
    </div>
    <h2>overflow overflow-y auto</h2>
    <div class="scroll-y">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll-y property</h2>
      </div>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
      </p>
    </div>
  </body>
</html>

具有所有值的溢出属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.scroll {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: scroll;
      }
      div.hidden {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: hidden;
      }
      div.auto {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: auto;
      }
      div.visible {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: visible;
      }
      div.overlay {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h2>Overflow 属性示例</h2>
    <h3>overflow: scroll</h3>
    <div class="scroll">
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <h3>overflow: hidden</h3>
    <div class="hidden">
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <h3>overflow: auto</h3>
    <div class="auto">
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <h3>overflow: visible</h3>
    <div class="visible">
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <br/>
    <br/>
    <h3>overflow: overlay</h3>
    <div class="overlay">
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
  </body>
</html>

CSS overflow属性

overflow 属性定义溢出元素框的行为内容。
此属性仅适用于具有指定高度的块元素。

它指定是否应剪切内容以适合框或者应在元素上添加滚动条。

这是以下属性的简写：

overflow-x
overflow-y

当容器设置了高度和宽度时，内容会溢出。

overflow属性具有以下值：

visible
hidden
scroll
auto
overlay

“叠加”值overlay已弃用。

设置溢出的用途之一是浮动清除。
但是，设置溢出不会清除元素上的浮动。

具有除“visible”以外的值的溢出元素将扩展到需要包含浮动子元素的大小，假设未声明高度。

溢出属性还可以创建块格式上下文。
当我们想要在浮动元素旁边对齐块元素时，它很有用。

初始值	visible
应用于	块容器，柔性容器和网格容器。
继承	无效
可动画的	无效
版本	CSS2.
DOM 语法	object.Style.overflow =“auto”;

CSS overflow 属性值说明

值	描述
visible	内容不会剪切并在填充盒外呈现。这是此属性的默认值。
hidden	内容被夹紧以适合填充盒。
scroll	添加滚动条以查看其余内容。
auto	取决于浏览器。如果内容溢出，则添加滚动条。
overlay	与自动相同，但滚动列在内容之上绘制而不是占用空间。如果它可能仍然可以使用，而不是占用空间。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:43 来源：oir作者：oir

←CSS overflow-y 属性

CSS padding-bottom 属性→

语法