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>

  • 相关阅读:
    Java数据类型转换(自动转换和强制转换)
    Java数据类型以及变量的定义
    Java8新特性_日期时间新类 LocalDate、LocalTime、LocalDateTime
    Java8新特性_接口中的默认方法
    java8 新特性 Optional容器类
    Java8新特性 并行流与串行流 Fork Join
    Java8新特性_stream API 练习
    IDEA导入JUnit4
    Reduce:规约;Collector:收集、判断性终止函数、组函数、分组、分区
    【Linux】排序命令sort
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11385860.html
Copyright © 2011-2022 走看看