css3-10 如何使用滚动条-优快云博客

本文介绍如何在CSS3中为设置了固定尺寸的div元素添加滚动条，包括不同overflow属性值的使用场景及区别，如hidden、auto和scroll，并通过示例代码展示效果。

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>