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

2021-08-28 17:25:32 字數 661 閱讀 7958

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

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

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

overflow屬性:

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

visible:

預設的overflow屬性值就是visible,

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

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

hidden:

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

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

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

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

auto:

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

overflow的作用:

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

前端知識點

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 知識點 ul li 中預設選擇class active firstli rem...

前端知識點

css實現單行文字溢位顯示 overflow hidden text overflow ellipsis white space nowrap 實現多行文字溢位顯示 display webkit box webkit box orient vertical webkit line clamp 3 o...

前端知識點

關於html 1.html語義化標籤的理解 結構化的理解 能否寫出簡潔的html結構 seo優化 2.h5中新增的屬性 如自定義屬性data,類名classname等,新增表單元素,拖拽drag 3.h5中新增的api,修改的api,廢棄的api 稍作了解 離線儲存,audio,video 關於cs...