html中滚动标签的常用属性，只会HTML和css不会js

小伙伴们，今天小编给你们讲一下HTML中滚动标签的常用属性，这可是我们写网页中必不可少的知识点哦！废话不多说了，我们开始吧！

首先，我们需要明确什么是滚动标签，其实它就是可以滚动某一区域内容的HTML标签。那么，接下来就是这些标签的常用属性了！

1. overflow

overflow属性是CSS的一个属性，可以设置盒子内容超出部分的处理方式，有四个选项：visible（默认值）、hidden、scroll和auto。当overflow为scroll或auto时，当内容超出盒子范围时，会出现滚动条，从而实现滚动效果。

2. overflow-x和overflow-y

虽然overflow可以设置横向和纵向滚动条，但是我们也可以使用overflow-x和overflow-y单独设置横向和纵向的滚动条，比如：

```

#box {

overflow-x: scroll;

overflow-y: hidden;

}

```

这样就只会出现横向滚动条，纵向滚动条不会出现。

3. width和height

width和height是设置盒子宽度和高度的属性，但是当内容超出盒子范围时，也可以用来实现滚动效果。比如：

```

#box {

width: 200px;

height: 200px;

overflow: auto;

}

```

这样当内容超出200px的范围时，盒子中就会出现滚动条。

4. margin和padding

这两个属性可以设置盒子的大小和位置，也可以影响滚动条的显示。比如：

```

#box {

width: 200px;

height: 200px;

overflow: auto;

margin: 20px;

padding: 10px;

}

```

这样就会在盒子周围留出20px的外边距和10px的内边距，影响滚动条的显示。

细心的小伙伴们肯定发现啦，当我们同时设置了width、height和overflow三个属性时，就可以实现一个限定大小并带滚动条的盒子了！比如：

```

#box {

width: 200px;

height: 200px;

overflow: auto;

}

```

当内容超出200px的范围时，盒子中就会出现滚动条，是不是很神奇呢？

好了，今天的HTML滚动标签知识就讲到这里啦~希望小伙伴们都有学到东西，记得多多实践哦！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/