CSS ::滚动条

  • Z时代
  • 2024-01-10
  • 分类：综合

可能存在元素的内容可能大于为其分配的空间量的情况。例如，给定的width和height属性不允许足够的空间容纳元素的内容。

CSS提供了一个称为溢流的属性 ，该属性 告诉浏览器如果盒子的内容大于盒子本身的大小，该怎么办。此属性可以采用以下值之一-

序号值与说明
1visible允许内容溢出其包含元素的边界。
2隐藏的嵌套元素的内容仅在包含元素的边界处被切除，并且没有滚动条可见。
3scroll包含元素的大小不会改变，但是会添加滚动条以允许用户滚动以查看内容。
4自动目的与滚动相同，但是仅在内容溢出时才会显示滚动条。

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>
   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

以上是 CSS ::滚动条 的全部内容， 来源链接： utcz.com/z/359384.html

回到顶部