WithCoderWithCoderWithCoder

CSS溢出overflow的简介

    在布局时,通常一个盒子中的内容是被限制在盒子的边界之内的。但是,有的时候内容的宽高大于容器盒子的宽高,可能就会产生溢出,就是不分或全部内容跑到盒子的边界之外了。css的属性overflow用于设置对溢出内容的处理方式。

    溢出可能在以下几种情况下发生:

    • 一个不换行的行元素宽度超出了容器盒子宽度。

    • 一个宽度固定的块元素放在了比它窄的容器盒子内。

    • 一个元素的高度超出了容器盒子的高度。

    • 一个子孙元素,由负边距值引起的部分内容在盒子外部。

    • text-indent属性引起的行内元素在盒子的左右边界外。

    • 一个绝对定位的子孙元素,部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

    当有溢出发生时,overflow属性约定了容器盒子是否裁剪掉超出其内容边界的部分,并且决定是否出现滚动条来访问被裁剪掉的内容。overflow有以下几个常用的参数值:

    • visible:对溢出的内容不做处理,内容可能会超出容器

    • hidden:隐藏溢出容器的内容,并且不会出现滚动条

    • scroll:隐藏溢出容器的内容,不过溢出的内容将以滑动滚动条的方式呈现

    • auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时按需出现滚动条   

    <style>
        .box1 {
            width150px;
            height150px;
            padding10px;
            background-colorrgb(206194194);
            overflowvisible;
            /* overflow: hidden; */
            /* overflow: scroll; */

            /* overflow: auto; */


            /* visible + !visible = auto */
            /* overflow-x: auto;
            overflow-y: visible; */
        }
        
        .box2 {
            width200px;
        }
    </style>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum eligendi sapiente unde magnam, atque officia vero nam. Suscipit officiis omnis eius praesentium illum provident repellat culpa vero harum nulla? Vel.
        </div>
    </div>

    我们以上面的代码为例,测试overflow在不同参数值下的效果。

    当overflow:visible时,结果如下图:

    1-2004092234522H.png

    当overflow:hidden时,结果如下图:  

    1-200409223405N8.png

    当overflow:scroll时,结果如下图:

    1-20040922355aA.png

    当overflow:auto时,结果如下图(把容器宽高设置可以放下内容时,滚动条不会出现):

    1-200409223GA25.png

    overflow-x | overflow-y

    当然,除了overflow之外,我们也可以通过overflow-x和overflow-y来单独设置容器水平和垂直方向的溢出处理方式。其中,overflow-x主要用来定义对水平方向内容溢出的处理方式,而overflow-y主要用来定义对垂直方向内容溢出的处理。

    overflow-x和overflow-y的参数值和overflow一样,此处不再过多说明。

    注意:

    1. 如果overflow-x和overflow-y值相同则等同于overflow。

    2. 如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值,则visible值会被重置为auto

  值

    举例:

    如下代码,将水平方向设置为visible,希望水平方向对溢出不做处理,但如果将垂直方向设置为非visible的值,最终水平方向的值会被重置为auto   

    <style>
        .box1 {
            width150px;
            height150px;
            padding10px;
            background-colorrgb(206194194);
            /* 水平方向设置visible,但最终会被重置为auto */
            overflow-xvisible;
            overflow-yscroll;
        }
        
        .box2 {
            width200px;
        }
    </style>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum eligendi sapiente unde magnam, atque officia vero nam. Suscipit officiis omnis eius praesentium illum provident repellat culpa vero harum nulla? Vel.
        </div>
    </div>

    最终效果如下图:

    1-200409224H4943.png

欢迎分享交流,转载请注明出处:WithCoder » CSS溢出overflow的简介