overflow屬性,此溢位非彼溢位

2021-09-26 05:37:06 字數 1188 閱讀 7941

四個值:visible(預設值),scroll,hidden和auto。

scroll值能阻止內容溢位,但會增加出滾動條,通過拉動滾動條可以瀏覽所有內容。

auto- 如果內容溢位被限制,則會新增乙個滾動條,使超出的內容可以通過滾動展示出來。

hidden- 隱藏掉內容溢位的部分,溢位的內容將不可見。

當文字超出時,overflow:scroll; 與 overflow:auto; 都會出現滾動條。

當文字沒有超出元素區域時,overflow:auto; 並不會出現滾動條,

而overflow:scroll; 依舊會顯示滾動條。

示例**:

div

#scroll

#auto

#hidden

<

/style>

<

/head>

"none"

>

這個文字在div元素裡面,它有乙個藍色的

背景顏色,並浮動到左側。 我們設定乙個具體的

div元素的高度和寬度,正如你所看到的,這樣會導致文字內容溢位。

<

/div>

"scroll"

>

這個文字在div元素裡面,它有乙個紅色的

背景顏色,並浮動到左側。 我們設定乙個具體的

div元素的高度和寬度,並設定overflow為scroll,正如你所看到的,這樣會使文字溢位內容可以拖拉展示。

<

/div>

"auto"

>

這個文字在div元素裡面,它有乙個綠色的

背景顏色,並浮動到左側。

<

/div>

"hidden"

>

這個文字在div元素裡面,它有乙個黃色的

背景顏色,並浮動到左側。 我們設定乙個具體的

div元素的高度和寬度,並設定overflow為hidden,正如你所看到的,這樣會導致文字內容的溢位部分被隱藏。

<

/div>

<

/body>

<

/html>

overflow文字溢位幾種屬性

charset utf 8 title box1 box2 box3 box4 box5 style head class box1 文字溢位測試文字溢位測試文字溢位測試文字溢位測試文字溢位測試文字溢位測試文字溢位測試div class box2 文字溢位測試文字溢位測試文字溢位測試文字溢位測試文字...

overflow溢位內容區的解釋

一 定義 overflow 屬性規定當內容溢位元素框時發生的事情。visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢...

溢位overflow和空間定位z index

語法格式 overflow visible hidden scroll auto visible 若內容溢位,溢位可見 hidden 若內容溢位,溢位 不可見 scroll 保持元素框大小,在框內應用滾動條顯示內容 auto 等同於scroll,它表示在需要時應用滾動條 適用情況 當元素有負邊界時 ...