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>
     
  • 相关阅读:
    Confluence 6 从一个备份中获得文件附件
    Confluence 6 从其他备份中恢复数据
    Confluence 6 从生产环境中恢复一个测试实例
    从 Confluence 5.3 及其早期版本中恢复空间
    Confluence 6 恢复一个空间的问题解决
    Confluence 6 从一个 XML 备份中导入一个空间
    Confluence 6 恢复一个空间
    Confluence 6 恢复一个站点有关使用站点导出为备份的说明
    网易蜂巢(云计算基础服务)MongoDB服务重磅来袭
    pdfjs viewer 开发小结
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9261514.html
Copyright © 2011-2022 走看看