失效妙用overflow设置为hidden有啥意义呢?默认visible可以不大神解释下

来源:4-1 overflow与absolute绝对定位

润晗代码

2020-04-09 20:42

最后overflow为啥一定要设置hidden呢?默认visible可以吗

写回答 关注

1回答

  • kelion
    2020-06-18 14:07:39

    仅对于 img 元素来说的话,overflow 的值是哪个都可以,因为对于 img 都会失效。

    既然会失效,那为什么要用 overflow,而且是 hidden,那是因为与 img 同级的兄弟元素可能溢出容器范围。

    那你问设置 visible: visible 可以嘛?当然可以,如果 img 元素的兄弟元素里的内容不会溢出容器的话。

    再问既然都不会溢出,也没别的需求,那完全不用 overflow  可不可以?当然可以。因为此处用 overflow 完全就是为了防止内容溢出的,而不是防止 img 元素会怎么样怎样的。


    总结一下:

    0  首先明白,overflow 为什么会对案例中 img 元素无效

    ① 图片移到右侧使用的是 absolute 跟 text-align,与 overflow 无关

    ② overflow 只作用于与 图片同级的 非 absolute 元素里的内容,防止溢出容器  


    下面给个溢出效果的代码案例:

    <div style="height: 300px;overflow:auto">
        <div class="h0 ovh tr" style="height: 700px;width: 600px;
                   margin:0 auto;background-image: url(./53937347_p0.png);
                   background-repeat: no-repeat;        
                   background-position: center center;        
                   background-size:cover">        
            &nbsp;
            下面就是会溢出的文本,所以父级会用 overflow: hidden;
            <br>
            dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd        
           <img class="abs ml30 mt30" style="height: 80px;" src="./53937347_p0.png" alt="">
        </div>    
    </div>


CSS深入理解之overflow

深入理解overflow相关特性及实际应用,为你打开另外一扇学习之窗

41729 学习 · 78 问题

查看课程

相似问题