用css怎么设置div滚动条的样式，可改变大小的

html-css013

用css怎么设置div滚动条的样式，可改变大小的,第1张

在css设置可改变大小的div滚动条样式方法：

1.首先新建html文档，进入代码书写界面。

2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。

我们在写html定义属性表的时候，经常会遇到这样的问题。

明明定义的宽和高都为100%，为什么body范围还是会超过屏幕范围呢，呈现结果如下：

我们通过显示margin边界可以看到其实，body默认是有margin值的：

通过在chrome中查看F12，也可以看到body的style中其实是有个默认的margin值的