失效妙用overflow设置为hidden有啥意义呢?默认visible可以不大神解释下
最后overflow为啥一定要设置hidden呢?默认visible可以吗
最后overflow为啥一定要设置hidden呢?默认visible可以吗
2020-04-09
仅对于 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"> 下面就是会溢出的文本,所以父级会用 overflow: hidden; <br> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd <img class="abs ml30 mt30" style="height: 80px;" src="./53937347_p0.png" alt=""> </div> </div>
举报