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>
我的旨在学过的东西不再忘记(主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法)的偏公益性质的完全免费的编程视频学习网站:
【读书编程笔记】fanrenyi.com;有各种前端、后端、算法、大数据、人工智能等课程。
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
AI交流资料群:753014672