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,不論是否需要,使用者 都會提...