課程
/前端開發
/HTML/CSS
/CSS深入理解之overflow
最后overflow為啥一定要設置hidden呢?默認visible可以嗎
2020-04-09
源自:CSS深入理解之overflow 4-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">???????? ???????? ????????下面就是會溢出的文本,所以父級會用?overflow:?hidden; ????????<br> ????????dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd???????? ???????<img?class="abs?ml30?mt30"?style="height:?80px;"?src="./53937347_p0.png"?alt=""> ????</div>???? </div>
舉報
深入理解overflow相關特性及實際應用,為你打開另外一扇學習之窗
3 回答overflow失效妙用
4 回答overflow失效妙用,無法實現
3 回答overflow妙用代碼
1 回答大神,有沒有css設置樣式啊
2 回答失效的妙用,無原代碼很難理解,有的請提供,先謝
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-06-18
僅對于 img 元素來說的話,overflow 的值是哪個都可以,因為對于 img 都會失效。
既然會失效,那為什么要用 overflow,而且是 hidden,那是因為與 img 同級的兄弟元素可能溢出容器范圍。
那你問設置 visible: visible 可以嘛?當然可以,如果 img 元素的兄弟元素里的內容不會溢出容器的話。
再問既然都不會溢出,也沒別的需求,那完全不用 overflow? 可不可以?當然可以。因為此處用 overflow 完全就是為了防止內容溢出的,而不是防止 img 元素會怎么樣怎樣的。
總結一下:
0? 首先明白,overflow 為什么會對案例中 img 元素無效
① 圖片移到右側使用的是 absolute 跟 text-align,與 overflow 無關
② overflow 只作用于與 圖片同級的 非 absolute 元素里的內容,防止溢出容器??
下面給個溢出效果的代碼案例: