• 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>

  • 相关阅读:
    ASPNET5应用程序启动
    DNX概述
    MySQL数据库管理员密码忘记如何修改?
    Rsync数据复制软件应用
    Centos7系统中Mysql数据库的安装
    基于Haproxy+Keepalived实现Haproxy的高可用
    源码编译安装Mariadb数据库的时候报错,/usr/bin/c++ doesn't support -std=c++11 or -std=c++0x, you need one that does.
    mariadb数据库的安装
    更改Ubuntu和Centos系统中的镜像源
    快速搭建ELK日志分析系统
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11385860.html
Copyright © 2020-2023  润新知