您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS滚动条样式（overflow）

时间：02-13来源：作者：点击数：

通过《CSS盒子模型》一节的学习我们知道，页面中的每个元素都可以看作是一个矩形的盒子，我们可以使用 CSS 来控制盒子的大小、位置等等信息。默认情况下，当元素中的内容超出盒子的大小时，例如元素内容区的宽度和高度所组成的矩形区域中不足以容纳元素中的内容时，一部分内容就会溢出盒子。

1. overflow

为了能更好的处理溢出的内容，CSS 中提供了一个名为 overflow 的属性，该属性可以设置如何处理溢出元素内容区的内容，属性的可选值如下表所示：

值	描述
visible	默认值，对溢出的内容不做处理，内容会在元素内容区之外显示
hidden	隐藏溢出元素内容区的内容
scroll	隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容
auto	如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容
inherit	从父元素继承 overflow 属性的值

【示例】使用 overflow 属性设置如何处理元素内容区溢出的内容：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 550px;
            height: 100px;
            margin-top: 20px;
            border: 1px solid red;
        }
        div.hidden {
            overflow: hidden;
        }
        div.scroll {
            overflow: scroll;
        }
        div.auto {
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="hidden">
        visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；<br>
        hidden：隐藏溢出元素内容区的内容；<br>
        scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；<br>
        auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；<br>
        inherit：从父元素继承 overflow 属性的值。
    </div>
    <div class="scroll">
        visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；<br>
        hidden：隐藏溢出元素内容区的内容；<br>
        scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；<br>
        auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；<br>
        inherit：从父元素继承 overflow 属性的值。
    </div>
    <div class="auto">
        visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；<br>
        hidden：隐藏溢出元素内容区的内容；<br>
        scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；<br>
        auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；<br>
        inherit：从父元素继承 overflow 属性的值。
    </div>
</body>
</html>

运行结果如下图所示：