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. 今日SGU 5.5

    SGU 114 题意:求一个点到其他点的距离总和最小,距离的定义是x轴距离乘以那个点的人数p 收获:带权中位数,按坐标排序,然后扫一遍,最后权值超过或等于总权值的一半时的那个点就是答案,证明暂无 #i ...

  2. idea 生成方法注释的快捷键

    我用的15,在keymap里搜索 Fix doc comment 给他一个快捷建.参考 http://www.oschina.net/question/179541_26961

  3. [Javascript] Classify JSON text data with machine learning in Natural

    In this lesson, we will learn how to train a Naive Bayes classifier and a Logistic Regression classi ...

  4. 怎样利用ash监控会话

    ash是很有效的监控工具之中的一个.1秒抓一次 select max(sample_time)over(),min(sample_time)over() from dba_hist_active_se ...

  5. Nginx系列（一）--nginx是什么？

    一.介绍 Nginx是一个高性能的HTTP和反向代理server,也是一个IMAP/POP3/SMTP代理server. Nginx是一款轻量级的Webserver/反向代理server以及电子邮件代 ...

  6. QTemporaryDir及QTemporaryFile建立临时目录及文件夹（创建一个随机名称的目录或文件，两者均能保证不会覆盖已有文件）

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址:本文标题:QTemporaryDir及QTemporaryFile建立临时目录及文件夹     本文地址: ...

  7. Android学习笔记进阶16之BitmapShader

    <1>简介 具体的看一下博文:Android学习笔记进阶15之Shader渲染 public   BitmapShader(Bitmap bitmap,Shader.TileMode ti ...

  8. 1.3 Quick Start中 Step 6: Setting up a multi-broker cluster官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 6: Setting up a multi-broker cluster ...

  9. Linux下PortSentry的配置

    Linux下PortSentry的配置       前年写过<IDS与IPS功能分析>一文,受到广大读者关注,现将近期有关IDS配置的文章和大家分享.    Internet上的服务器一般 ...

  10. position记录

    1.  relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级.均是以父级的左上角 ...