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. 关于oracle sql语句查询时 表名和字段名要加双引號的问题具体解释

      作为oracle的刚開始学习的人相信大家一定会遇到这个问题.如图:          明明就是navicat可视化创建了表,但是就是不能查到!这个为什么呢?           select * ...

  2. 非对称算法，散列(Hash)以及证书的那些事

    转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/35389657 作者:小马 这几个概念在金融电子支付领域用得比較多,我忽然认为把它们 ...

  3. H5+混合移动app

    H5+混合移动app 前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多.... ...

  4. 用VXE保护Linux系统安全

      本文被转载在:http://www.linuxso.com/a/linuxxitongguanli/161.html 650) this.width=650;" onclick=&quo ...

  5. HttpClient的基本使用

    HttpClient的基本使用 前言 HttpClient是Apache提供的一个用于在Java中处理HTTP请求.响应操作的工具,由于JDK自带的API对HTTP协议的支持不是很友好,使用起来也不是 ...

  6. jsp+tomcat+ 创建project 配置project

    *如今我们已经下载到了 tomcat 7.0+ eclipse for java ee 直接解压,打开eclipse. 接下来是步骤: eclipse 打开的界面.空空如也 ! ..* 点击 file ...

  7. 38.IntelliJ IDEA中创建Web聚合项目(Maven多模块项目)

    转自:https://blog.csdn.net/u012702547/article/details/77431765 Eclipse用多了,IntelliJ中创建Maven聚合项目可能有小伙伴还不 ...

  8. mysql 获取自增id的值的方法

    原生jdbc方式: Statement.getGeneratedKeys() 示例: Statement stmt = null; ResultSet rs = null; try { // // C ...

  9. html5 audio标签相关知识点总结

    1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...

  10. 【Codeforces Round #431 (Div. 2) A】Odds and Ends

    [链接]点击打开链接 [题意] 让你把一个数组分成奇数个部分. 且每个部分的长度都是奇数. [题解] 很简单的脑洞题. 开头和结尾一定要为奇数,然后 n为奇数的话,就选整个数组咯. n为偶数的话,不能 ...