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. 20亿与20亿表关联优化方法(超级大表与超级大表join优化方法)

    记得5年前遇到一个SQL.就是一个简单的两表关联.SQL跑了几乎相同一天一夜,这两个表都非常巨大.每一个表都有几十个G.数据量每一个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单 ...

  2. 20.Node.js EventEmitter的方法和事件

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html EventEmitter 提供了多个属性,如 on 和 emit.on 函数用于绑定事件函数, ...

  3. IIS下配置SilverLight

    在Windows 2003 IIS 6.0环境下  在Silverlight中需要使用xap.XAML文件类型,如果您想在IIS服务器上使用Silverlight 4.0程序,所以必须在IIS中注册  ...

  4. Spark通过YARN提交任务不成功（包含YARN cluster和YARN client)

    无论用YARN cluster和YARN client来跑,均会出现如下问题. [spark@master spark-1.6.1-bin-hadoop2.6]$ jps 2049 NameNode ...

  5. java DSA Signature Sign And Verify

    SignatureSignAndVerify import java.security.KeyPair; import java.security.KeyPairGenerator; import j ...

  6. Linux shell command学习笔记（一）

    Shell的种类有很多种,例如CSH,Bourne Shell,Korn Shell.在现在的大多数Linux发行版中,默认的Shell一般都是Bourne again shell(bash). &l ...

  7. 洛谷——P1012 拼数

    https://www.luogu.org/problem/show?pid=1012#sub 题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整 ...

  8. 文档翻译第003篇：Process Monitor帮助文档（Part 3，附Process Monitor的简单演示）

    [导入与导出配置] 一旦您配置了一个筛选器,您能够使用"工具(Tools)"菜单中的"保存筛选器(SaveFilters)"菜单项将其保存.Process Mo ...

  9. php函数symlink详解

    php函数symlink详解 建立符号链接 (symbolic link),类似于Windows里头常用的.lnk快捷方式 symlink语法: int symlink(string target, ...

  10. jQuery快速入门知识重点

    1.jquery中attr与prop的区别   attr:是通过setAttribute 和 getAttribute来设置的使用的是DOM属性节点   prop:是通过document.getEle ...