为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

1 回答

仅对于 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>


1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信