css怎么加滚动条

css添加滚动条的方法是，给div添加overflow属性，并且设置属性值为scroll，如【overflow: scroll; 】。overflow属性指定了内容溢出时，会发生什么。

本文操作环境：windows10系统、css 3、ThinkPad t480电脑。

要添加滚动条其实很简单，有一个属性overflow，它指定了如果内容溢出一个元素的框，会发生什么。

来看看属性值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherIT 规定应该从父元素继承 overflow 属性的值。

示例：

!DOCTYPE htML>
    html>
    head>
    meta charset="utf-8">
     title>
    (php.cn)/title>
     style>
div.ex1 {
        background-color: lightblue;
        width: 110px;
        height: 110px;
        overflow: scroll;
}
div.ex2 {
        background-color: lightblue;
        width: 110px;
        height: 110px;
        overflow: hidden;
}
div.ex3 {
        background-color: lightblue;
        width: 110px;
        height: 110px;
        overflow: auto;
}
div.ex4 {
        background-color: lightblue;
        width: 110px;
        height: 110px;
        overflow: visible;
}
    /style>
    /head>
    body>
    h1>
    overflow 属性/h1>
    p>
    如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。/p>
    h2>
    overflow: scroll:/h2>
    div class="ex1">
    ，梦开始的地方！，梦开始的地方！，梦开始的地方！，梦开始的地方！/div>
    h2>
    overflow: hidden:/h2>
    div class="ex2">
    ，梦开始的地方！，梦开始的地方！，梦开始的地方！，梦开始的地方！/div>
    h2>
    overflow: auto:/h2>
    div class="ex3">
    ，梦开始的地方！，梦开始的地方！，梦开始的地方！，梦开始的地方！/div>
    h2>
    overflow: visible (默认):/h2>
    div class="ex4">
    ，梦开始的地方！，梦开始的地方！，梦开始的地方！，梦开始的地方！/div>
    /body>
    /html>
    

大家可以将上面的代码复制到本地，然后在本地运行看看效果。

相关视频教程分享：css视频教程

以上就是css怎么加滚动条的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！