css-overflow

最新推荐文章于 2022-02-13 15:45:16 发布

Mars-xq

最新推荐文章于 2022-02-13 15:45:16 发布

阅读量494

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sinat_31057219/article/details/62889697

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

overflow :溢出
属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值：visible

可能的值

visible 
//默认值。内容不会被修剪，会呈现在元素框之外。
//内容太多会超出盒子

hidden  
//内容会被修剪，并且其余内容是不可见的。
//内容太多会被裁剪到盒子大小

scroll  
//内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
//无论内容多少都会显示滚动

auto    
//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
//内容太多会显示滚动，太少不显示

inherit 
//规定应该从父元素继承 overflow 属性的值。

示例一：

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">

        .c1 {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: scroll
        }

        .c2 {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: auto
        }

        .c3 {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: hidden
        }

        .c4 {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: inherit
        }

        .c5 {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: visible
        }
    </style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div class="c1">
    scroll==内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。===11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111。
</div>
<br>
<div class="c2">
    auto===如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。===2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222。
</div>
<br>
<div class="c3">
    hidden==内容会被修剪，并且其余内容是不可见的。==33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333。
</div>
<br>
<div class="c4">
    inherit==规定应该从父元素继承 overflow
    属性的值。==444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444。
</div>
<br>
<div class="c5">
    visible==默认值。内容不会被修剪，会呈现在元素框之外。===55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555。
</div>
</body>
</html>

效果图：

这里写图片描述

示例二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .c1 {
            margin-bottom: 20px;
            background-color: red;
            width: 100px;
            height: 50px;
            overflow: auto;
        }

        .c2 {
            margin-bottom: 20px;
            background-color: #0eabdf;
            height: 50px;
            width: 100px;
            overflow: hidden;
        }

        .c3 {
            margin-bottom: 20px;
            background-color: #ff6600;
            width: 100px;
            overflow: scroll;
            height: 50px;
        }

        .c4 {
            margin-bottom: 20px;
            background-color: #00ff00;
            height: 50px;
            width: 100px;
            overflow: visible;
        }

        .c5 {
            margin-bottom: 20px;
            background-color: red;
            width: 100px;
            height: 50px;
            overflow: auto;
        }

        .c6 {
            margin-bottom: 20px;
            background-color: #0eabdf;
            width: 100px;
            height: 50px;
            overflow: hidden;
        }

        .c7 {
            margin-bottom: 20px;
            background-color: #ff6600;
            height: 50px;
            width: 100px;
            overflow: scroll;
        }

        .c8 {
            margin-bottom: 20px;
            background-color: #00ff00;
            height: 50px;
            width: 100px;
            overflow: visible;
        }

    </style>
</head>
<body>
<div class="c1">auto</div>
<br/>
<div class="c2">hidden</div>
<br/>
scroll:一定会显示滚动条，content区包含滚动条。
<div class="c3">scroll</div>
<br/>
<div class="c4">visible</div>
<br/>
auto：内容太多会显示滚动条，content区包含滚动条。
<div class="c5">autoautoautoautoautoautoautoautoautoautoautoautoautoautoauto</div>
<br/>
hidden：内容太多会被裁剪
<div class="c6">hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden</div>
<br/>
<div class="c7">scrollscrollscrollscrollscrollscrollscrollscrollscrollscroll</div>
<br/>
visible:默认值。内容太多会超过盒子范围。
<div class="c8">visiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisible</div>

</body>
</html>

效果图：

这里写图片描述

示例三：

示例二中去掉高度后：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .c1 {
            margin-bottom: 20px;
            background-color: red;
            width: 100px;
            overflow: auto;
        }

        .c2 {
            margin-bottom: 20px;
            background-color: #0eabdf;
            width: 100px;
            overflow: hidden;
        }

        .c3 {
            margin-bottom: 20px;
            background-color: #ff6600;
            width: 100px;
            overflow: scroll;
        }

        .c4 {
            margin-bottom: 20px;
            background-color: #00ff00;
            width: 100px;
            overflow: visible;
        }

        .c5 {
            margin-bottom: 20px;
            background-color: red;
            width: 100px;
            overflow: auto;
        }

        .c6 {
            margin-bottom: 20px;
            background-color: #0eabdf;
            width: 100px;
            overflow: hidden;
        }

        .c7 {
            margin-bottom: 20px;
            background-color: #ff6600;
            width: 100px;
            overflow: scroll;
        }

        .c8 {
            margin-bottom: 20px;
            background-color: #00ff00;
            width: 100px;
            overflow: visible;
        }

    </style>
</head>
<body>
<div class="c1">auto</div>
<br/>
<div class="c2">hidden</div>
<br/>
scroll:一定会显示滚动条，content区包含滚动条。
<div class="c3">scroll</div>
<br/>
<div class="c4">visible</div>
<br/>
auto：内容太多会显示滚动条，content区包含滚动条。
<div class="c5">autoautoautoautoautoautoautoautoautoautoautoautoautoautoauto</div>
<br/>
hidden：内容太多会被裁剪
<div class="c6">hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden</div>
<br/>
<div class="c7">scrollscrollscrollscrollscrollscrollscrollscrollscrollscroll</div>
<br/>
visible:默认值。内容太多会超过盒子范围。
<div class="c8">visiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisible</div>

</body>
</html>