• 技术文章 >web前端 >css教程

    css怎么加滚动条

    VV2021-07-12 16:48:05原创284

    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中文网(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">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>
    
    <h2>overflow: hidden:</h2>
    <div class="ex2">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>
    
    <h2>overflow: auto:</h2>
    <div class="ex3">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>
    
    <h2>overflow: visible (默认):</h2>
    <div class="ex4">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>
    
    </body>
    </html>

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

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

    以上就是css怎么加滚动条的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 滚动条
    上一篇:css如何设置斜体 下一篇:在CSS中怎么给按钮添加背景图片(详解及实例)
    大前端线上培训班

    相关文章推荐

    • css怎么隐藏下拉滚动条• css怎么设置滚动条透明• css怎么让滚动条隐藏• css如何修改滚动条箭头样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网