CSS滚动条

通过《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>

运行结果如下图所示:

图:overflow 属性演示

2. overflow-x、overflow-y

在 CSS3 中还提供了 overflow-x 和 overflow-y 两个属性,它们的作用与 overflow 属性相似,属性的可选值与

overflow 属性相同,其中:

  • overflow-x:设置当元素内容区的内容在水平方向上溢出元素时如何处理溢出的内容;
  • overflow-y:设置当元素内容区的内容在垂直方向上溢出元素时如何处理溢出的内容。

提示:当单独设置 overflow-x 或 overflow-y 其中的一个属性为非 visible 时,另外一个属性将自动设置为 auto。另外,因为

CSS3 还没有最终定稿,所以这两个属性的作用可能会变更或调整。

原文地址CSS滚动条

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪6 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪6 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试