溢出内容 - 属性 - 代码

最新推荐文章于 2024-06-04 14:04:24 发布

星星小团

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量24

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2301_79726309/article/details/134752488

版权

溢出内容

含义:容器有一个自己的宽度/高度/大小,但是盛放的内容过多,有超出的效果,这种超出的效果倍称之为溢出

属性:overflow

取值:

visible;====溢出显示

hidden;=====溢出隐藏

scroll;=====溢出滚动,默认会存在两个滚动条,默认情况下,没有超出,两个滚动条都没有功能;;哪一个方向超出,哪一个方向有作用;

auto;=======溢出自动,默认没有任何的滚动条,但一个方向溢出了,哪一个方向右滚动条功能(使用频率比较高)

两个单一的属性

overflow-x: 只设置水平方向的滚动条

overflow-y: 只设置垂直方向的滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .red {
            width: 500px;
            height: 500px;
            border: 10px solid red;
            /* 溢出属性 */
            /* 溢出显示,默认效果 */
            /* overflow:visible; */
            /* 溢出隐藏,裁剪的效果,超出部分直接裁剪掉 */
            /* overflow: hidden; */
            /* 溢出滚动 */
            /* overflow: scroll; */
            /* 溢出自动 */
            overflow: auto;

        }

        p {
            width: 1000px;
        }
    </style>
</head>

<body>
    <div class="red">
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto natus repellendus, id harum quisquam
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis possimus assumenda, natus debitis
            laboriosam pariatur. Aperiam placeat eum porro in reprehenderit animi, voluptatibus a illum quod
            exercitationem officia numquam? Corporis.
            Dicta eos cumque inventore mollitia impedit quidem reprehenderit consectetur distinctio, accusamus est
            praesentium ipsa ducimus perferendis sequi voluptate culpa deserunt eveniet architecto laborum incidunt sed
            provident velit nisi nostrum? Harum.
            Corporis corrupti sint asperiores labore officia eum quas cupiditate repellendus blanditiis assumenda qui
            porro enim ratione ipsum maxime, sit quaerat similique. Voluptatibus minus architecto exercitationem
            nesciunt error, asperiores mollitia cumque!
            Est maxime pariatur veniam quis reiciendis qui id quam incidunt dolorum nobis perferendis cupiditate
            quisquam, quos obcaecati quia hic numquam laudantium soluta dolore odit. Libero voluptatibus impedit
            asperiores dolorem id.
            Vitae quidem laudantium, nobis commodi, voluptate sapiente eveniet eligendi, ipsam minus delectus quia! Quos
            tempore nemo odio doloremque nostrum dolorem eius. Laborum nobis voluptate cumque expedita illo illum omnis
            ab?
            provident corrupti doloremque ipsum! Corporis, architecto quidem? Cum repellendus nam non excepturi laborum,
            asperiores iusto modi?
            Sint incidunt assumenda iste! Harum libero veritatis perferendis odio quibusdam provident vero in ex,
            expedita sapiente? Possimus, voluptatibus soluta! Accusamus ipsa molestiae quasi minima quia dolores quo ea
            corporis nisi?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam architecto sint odit consequuntur, et ut
            fugiat incidunt, a molestias autem quas minima deserunt recusandae aliquam tenetur ad at nemo labore!

        </p>
    </div>
</body>

</html>