zoukankan      html  css  js  c++  java
  • css3-10 如何使用滚动条

    css3-10 如何使用滚动条

    一、总结

    一句话总结:给设置了宽高的块标签使用,直接将overflow属性写到style里面即可。

    1、滚动条的使用对象时谁?

    一般是div,当div比较小(设置了宽高),而内容又比较多的时候,就可以用滚动条

    12         div{
    13             width:500px;
    14             height:200px;
    15             border:2px solid #f00;
    16             /*overflow:scroll;*/
    17             overflow:auto;
    18             /*overflow:hidden;*/
    19         }

    2、如何给一个div使用滚动条?

    直接在样式里面加上overflow:(后面接overflow的三个属性)

    3、overflow常用的三个属性是哪三个?

    overflow:hidden
    overflow:auto
    overflow:scroll

    4、overflow常用属性中auto和scroll的区别是什么?

    scroll是不管怎样都出现垂直和水平的滚动条,而auto就是垂直或者水平方向上面内容放不下才出现滚动条

    推荐使用auto

    16             /*overflow:scroll;*/
    17             overflow:auto;

    二、如何使用滚动条

    1、相关知识

    滚动条:
    overflow:hidden
    overflow:auto
    overflow:scroll

    2、代码

    overflow滚动条

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9             margin:0px;
    10         }
    11         
    12         div{
    13             width:500px;
    14             height:200px;
    15             border:2px solid #f00;
    16             /*overflow:scroll;*/
    17             overflow:auto;
    18             /*overflow:hidden;*/
    19         }
    20     </style>
    21 </head>
    22 <body>
    23     <div>
    24         <h1>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</h1>
    25     </div>    
    26 </body>
    27 </html>
     
  • 相关阅读:
    项目中遇到的IE8浏览器访问页面过慢问题
    linux下安装Oracle时交换空间不足的解决方法
    linux下为目录和文件设置权限
    启动TDS LDAP 服务器遇到的问题总结
    sql1032n sql6048n db2start启动不了 db2修改hostname
    IBM CE 错误集之(FNRCS0005E)
    Oracle同一个用户下启动多个数据库实例
    几种任务调度的 Java 实现方法与比较
    EXP-00056: ORACLE error 12154 encountered
    oracle删除数据库中的所有表
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9261514.html
Copyright © 2011-2022 走看看