課程
/前端開發(fā)
/HTML/CSS
/CSS深入理解之overflow
最后overflow為啥一定要設(shè)置hidden呢?默認(rèn)visible可以嗎
2020-04-09
源自:CSS深入理解之overflow 4-1
正在回答
僅對于 img 元素來說的話,overflow 的值是哪個都可以,因?yàn)閷τ?img 都會失效。
既然會失效,那為什么要用 overflow,而且是 hidden,那是因?yàn)榕c img 同級的兄弟元素可能溢出容器范圍。
那你問設(shè)置 visible: visible 可以嘛?當(dāng)然可以,如果 img 元素的兄弟元素里的內(nèi)容不會溢出容器的話。
再問既然都不會溢出,也沒別的需求,那完全不用 overflow? 可不可以?當(dāng)然可以。因?yàn)榇颂幱?overflow 完全就是為了防止內(nèi)容溢出的,而不是防止 img 元素會怎么樣怎樣的。
總結(jié)一下:
0? 首先明白,overflow 為什么會對案例中 img 元素?zé)o效
① 圖片移到右側(cè)使用的是 absolute 跟 text-align,與 overflow 無關(guān)
② overflow 只作用于與 圖片同級的 非 absolute 元素里的內(nèi)容,防止溢出容器??
下面給個溢出效果的代碼案例:
<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>
舉報(bào)
深入理解overflow相關(guān)特性及實(shí)際應(yīng)用,為你打開另外一扇學(xué)習(xí)之窗
3 回答overflow失效妙用
4 回答overflow失效妙用,無法實(shí)現(xiàn)
3 回答overflow妙用代碼
2 回答失效的妙用,無原代碼很難理解,有的請?zhí)峁?,先謝
1 回答大神,有沒有css設(shè)置樣式啊
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2020-06-18
僅對于 img 元素來說的話,overflow 的值是哪個都可以,因?yàn)閷τ?img 都會失效。
既然會失效,那為什么要用 overflow,而且是 hidden,那是因?yàn)榕c img 同級的兄弟元素可能溢出容器范圍。
那你問設(shè)置 visible: visible 可以嘛?當(dāng)然可以,如果 img 元素的兄弟元素里的內(nèi)容不會溢出容器的話。
再問既然都不會溢出,也沒別的需求,那完全不用 overflow? 可不可以?當(dāng)然可以。因?yàn)榇颂幱?overflow 完全就是為了防止內(nèi)容溢出的,而不是防止 img 元素會怎么樣怎樣的。
總結(jié)一下:
0? 首先明白,overflow 為什么會對案例中 img 元素?zé)o效
① 圖片移到右側(cè)使用的是 absolute 跟 text-align,與 overflow 無關(guān)
② overflow 只作用于與 圖片同級的 非 absolute 元素里的內(nèi)容,防止溢出容器??
下面給個溢出效果的代碼案例: