zoukankan      html  css  js  c++  java
  • overflow属性

    overflow属性规定的是当盒子里的内容溢出盒子框时,所显示的样式。共有三个属性值:

    scroll     文本显示滚动条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .b1{width: 200px;
            height: 700px;
            border:10px solid red;
            overflow: scroll;
            display: block;
            margin: auto; 
        }
        </style>
    </head>
    <body>
        <div class="b1">干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 </div>
        
    </body>
    </html>

    hidden    文本超出的地方不可见

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .b1{width: 500px;
            height: 200px;
            border:10px solid red;
            overflow: hidden;
            display: block;
            margin: auto; 
        }
        </style>
    </head>
    <body>
        <div class="b1">干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 </div>
        
    </body>
    </html>

    auto    自动,如果有超出的部分,显示滚动条。没有就不会显示滚动条。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .b1{width: 500px;
            height: 200px;
            border:10px solid red;
            overflow: auto;
            display: block;
            margin: auto; 
        }
        </style>
    </head>
    <body>
        <div class="b1">干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 干嘛干嘛部分屈服i青少年覅亲爱才能看从旁 </div>
        
    </body>
    </html>

  • 相关阅读:
    Visual Studio 2019 XAML Hot Reload功能介绍
    C#开启和关闭UAC功能
    使用Powershell启用/关闭Windows功能
    解决C#调用COM组件异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)的错误
    ComPtr的介绍以及使用
    C#使用Selenium
    estimateAffinePartial2D 替代 estimateRigidTransform
    mtcnn
    pytorch 指定GPU
    cv2.imread()与PIL中Image.open(),以及相互转换
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11385860.html
Copyright © 2011-2022 走看看