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滚动条

相关推荐
爱吃的强哥6 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安15 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板21 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩22 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真27 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记