关于CSS滚动条样式(overflow)是什么,小小编为你解答

正如在“CSS盒模型”一节中所学,页面中的每个元素都可以被视为矩形盒,可以使用CSS控制盒的大小和位置等信息。 默认情况下,如果元素中的内容超过框的大小,例如,元素中的内容不足以容纳在由元素内容区域的宽度和高度组成的矩形区域中,则部分内容将溢出框。

1. overflow

为了能更好的处理溢出的内容,CSS 中提供了一个名为 overflow 的属性,该属性可以设置如何处理溢出元素内容区的内容,属性的可选值如下表所示:

描述
visible 默认值,对溢出的内容不做处理,内容会在元素内容区之外显示
hidden 隐藏溢出元素内容区的内容
scroll 隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容
auto 如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容
inherit 从父元素继承 overflow 属性的值

【示例】使用 overflow 属性设置如何处理元素内容区溢出的内容:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 550px;
  7. height: 100px;
  8. margin-top: 20px;
  9. border: 1px solid red;
  10. }
  11. div.hidden {
  12. overflow: hidden;
  13. }
  14. div.scroll {
  15. overflow: scroll;
  16. }
  17. div.auto {
  18. overflow: auto;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class=“hidden”>
  24. visible:默认值,对溢出的内容不做处理,内容会在元素内容区之外显示;<br>
  25. hidden:隐藏溢出元素内容区的内容;<br>
  26. scroll:隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容;<br>
  27. auto:如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容;<br>
  28. inherit:从父元素继承 overflow 属性的值。
  29. </div>
  30. <div class=“scroll”>
  31. visible:默认值,对溢出的内容不做处理,内容会在元素内容区之外显示;<br>
  32. hidden:隐藏溢出元素内容区的内容;<br>
  33. scroll:隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容;<br>
  34. auto:如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容;<br>
  35. inherit:从父元素继承 overflow 属性的值。
  36. </div>
  37. <div class=“auto”>
  38. visible:默认值,对溢出的内容不做处理,内容会在元素内容区之外显示;<br>
  39. hidden:隐藏溢出元素内容区的内容;<br>
  40. scroll:隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容;<br>
  41. auto:如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容;<br>
  42. inherit:从父元素继承 overflow 属性的值。
  43. </div>
  44. </body>
  45. </html>

运行结果如下图所示:

1515363P5-0
图:overflow 属性演示

2. overflow-x、overflow-y

在 CSS3 中还提供了 overflow-x 和 overflow-y 两个属性,它们的作用与 overflow 属性相似,属性的可选值与 overflow 属性相同,其中:

  • overflow-x:设置当元素内容区的内容在水平方向上溢出元素时如何处理溢出的内容;
  • overflow-y​:设置当元素内容区的内容在垂直方向上溢出元素时如何处理溢出的内容。

提示:当单独设置 overflow-x 或 overflow-y 其中的一个属性为非 visible 时,另外一个属性将自动设置为 auto。另外,因为 CSS3 还没有最终定稿,所以这两个属性的作用可能会变更或调整。

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片