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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         div{

             width:500px;

             height:200px;

             border:2px solid #f00;

             /*overflow:scroll;*/

             overflow:auto;

             /*overflow:hidden;*/

         }

     </style>

 </head>

 <body>

     <div>

         <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>

     </div>

 </body>

 </html>
 

css3-10 如何使用滚动条的更多相关文章

  1. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

  2. css3自定义移动端滚动条

    css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角 ...

  3. 网站美化：CSS3自定义修改浏览器滚动条

    滚动条组件 ::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-thumb //滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还 ...

  4. 十天精通CSS3(10)

    多列布局——Columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它 ...

  5. css3 实现加载滚动条效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  7. CSS3 莲花盛开动画

    点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm 或者:http://keleyi.com/keleyi/phtml/css3/10a.htm 效果图: 代 ...

  8. Qt 自定义 滚动条 样式

    今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几 ...

  9. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  10. Qt 自定义 滚动条 样式（模仿QQ）

    今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几 ...

随机推荐

  1. POJ--2516--Minimum Cost【最小费用最大流】

    链接:http://poj.org/problem?id=2516 题意:有k种货物,n个客户对每种货物有一定需求量,有m个仓库.每一个仓库里有一定数量的k种货物.然后k个n*m的矩阵,告诉从各个仓库 ...

  2. Swagger文档转Word

    Swagger文档转Word 文档   GitHub 地址:https://github.com/JMCuixy/SwaggerToWord/tree/developer 原创作品,转载请注明出处:h ...

  3. 56.fread fwrite

    fwrite //初始化数组 ]; ; i < ;i++) { printf("\n%d", a[i] = i); } //以写的方式打开文件 FILE *pf = fope ...

  4. JS实现文件另存为

    JS实现文件另存为 //下载平面图 function downPlan() { var oPop = window.open(src, "", "width=1, hei ...

  5. Docker+Solr

    原文:Docker+Solr docker 内的solr并不是部署在tomcat里,而是自启动的.默认的home是/opt/solr/server/solr # docker search solr ...

  6. 【2017"百度之星"程序设计大赛 - 初赛（A）】今夕何夕

    [链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=775&pid=1005 [题意] 在这里写题意 [题 ...

  7. Servlet 获取多个参数

    <html><head> <title>First Servlet</title></head><body bgColor=" ...

  8. ios 获取手机信息（UIDevice、NSBundle、NSLocale）

    iOS的SDK中提供了UIDevice.NSBundle,NSLocale. UIDevice        UIDevice提供了多种属性.类函数及状态通知,帮助我们全方位了解设备状况. 从检測电池 ...

  9. 用c实现的各种排序的方法

    #include <stdio.h> void swap(int *a, int *b); void bubble_sort(int a[], int n); void select_so ...

  10. Android Notification.setLatestEventInfo弃用和Notification.Builder用法

    今天在学习小米便签的源码的时候,至于源码的地址,http://m.blog.csdn.net/article/details?id=50544248 ,里面有好多github的开源项目,打开项目,报错 ...