1. 程式人生 > >前端知識點之overflow屬性的用法

前端知識點之overflow屬性的用法

如果你沒有設定一個盒子的 高度,該盒子的高度將根據他容納的內容的需要進行增長;

但是當你給盒子指定一個高度或者寬度而裡面的內容超出的時候可以用到overflow,又或者想讓浮動元素撐起

包含塊的時候也可以使用overflow屬性;

overflow屬性:

其有四個值:visible(預設),hidden,scroll,auto;

visible:

預設的overflow屬性值就是visible,

注意:盒子外面的內容是可以見到的,內容不會影響頁面的工作流,

(一般來說,可以部位裡面的內容為文字的盒子設定固定的寬度)

hidden:

預設值visible的相反的屬性值就是hidden,

它會將所有超出盒子的內容都給隱藏掉;

scroll:設定一個盒子的overflow屬性的值為scroll,將會隱藏掉渲染到盒子外面的內容,

但是他將會提供一個滾動條,在盒子的內部進行滾動,從而可以檢視剩餘的內容;

auto:

overflow的屬性值auto值與scroll很像,就是可以在不需要滾動條的時候 也會出現滾動條;


overflow的作用:

清除浮動,應用了overflow的元素將會擴充套件到他需要的大小,以包圍它裡面的滾動的子元素;