學習筆記之overflow屬性

2021-10-01 21:40:56 字數 1410 閱讀 6305

overflow屬性是當內容溢位內容框生效的

預設值visible

版本css2

jsobject.style.overflow=「scroll」; 值

解釋visible

不會裁剪內容,但是內容超出內容框則會溢位顯示

hidden

裁剪內容,但不提供滾動條

auto

裁剪內容,如果溢位則提供滾動條,不溢位的話則不提供滾動條

scroll

裁剪內容,提供滾動條

inherit

繼承父類的overflow的屬性

滾動條會占用容器的可用寬度或高度

預設值visible

版本css3

jsobject.style.overflowx=「scroll」;

overflow-x的屬性和y的一樣值解釋

visible

不會裁剪內容,但是內容超出內容框則會溢位顯示

hidden

裁剪內容,但不提供滾動條

auto

裁剪內容,如果溢位則提供滾動條,不溢位的話則不提供滾動條

scroll

裁剪內容,提供滾動條

no-display

如果內容不適合內容框,則刪除整個框。

no-content

如果內容不適合內容框,則隱藏整個內容。

overflow-x 是對內容的左/右生效

overflow-y 是對內容的上/下生效

寫的時候發現了兩個問題:

1.如果同時設定overflow-x和overflow-y

overflow-x

: visible;

overflow-y

: scroll;

那麼visible值就會變成auto

2.如果我想要上下裁剪左右讓其溢位的話

overflow-x

: visible;

overflow-y

: hidden;

overflow-x的visblie會變成auto,解決方法是在外面在套乙個div然後分開設定

css部分

.container

.content

.purple

html部分

class

="container"

>

class

="content"

>

class

="purple"

>

紫色span

>

div>

div>

CSS學習 overflow屬性

在網頁布局中,未處理的溢位元素絕對算得上是個 毒瘤 因為如果乙個 盒子 周圍還有其它元素,而從這個盒子中溢位的元素會和盒子周圍的元素發生層疊,並脫離了整個html元素,所以我們應當合理使用css中的overflow屬性來處理溢位的元素。doctype html html lang en head m...

overflow學習筆記

overflow主要是用來指定當元素超出範圍時,如何處理 溢位 的部分。二 應用場景 三 應用問題 四 參考鏈結 overflow實際由兩個屬性組成 overflow x overflow y,當我們只寫乙個屬性時,會將這兩個屬性設定為相同的設定值 元素不會被處理,溢位部分會真實的顯示在超出區域 恐...

overflow 屬性的使用

所有主流瀏覽器都支援 overflow 屬性。注釋 任何的版本的 internet explorer 包括 ie8 都不支援屬性值 inherit overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll,不論是否需要,使用者 都會提...