- visible
- hidden
- scroll
- auto
visible 使內容可見，因此多的內容會溢出元素範圍 ， hidden 為隱藏多的內容， scroll 產生捲軸， auto 則交給瀏覽器決定呈現方式。
舉例如下
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 | div { display: inline-block; margin: 5%; width: 20%; height: 16%; border: thin solid black;}div.visible { overflow: visible;}div.hidden { overflow: hidden;}div.scroll { overflow: scroll;}div.auto { overflow: auto;}/* 《程式語言教學誌》的範例程式 檔名：visual13.css 功能：示範 CSS 2.1 樣式表的使用 作者：張凱慶 時間：西元 2011 年 7 月 */ |
我們以下面的 HTML 文件載入
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 | <html><head><title>網頁標題</title><link rel="stylesheet" type="text/css" href="visual13.css"></head><body><div class="visible">You ever have that feeling where you're not sure if you're awake or still dreaming?</div><div class="hidden">You ever have that feeling where you're not sure if you're awake or still dreaming?</div><div class="scroll">You ever have that feeling where you're not sure if you're awake or still dreaming?</div><div class="auto">You ever have that feeling where you're not sure if you're awake or still dreaming?</div></body></html><!-- 《程式語言教學誌》的範例程式 檔名：visual13.html 功能：示範 CSS 2.1 樣式表的使用 作者：張凱慶 時間：西元 2011 年 7 月 --> |
瀏覽器 (broswer) 開啟如下
| 中英文術語對照 | |
|---|---|
| 性質 | property |
| 元素 | element |
| 關鍵字 | keyword |
| 瀏覽器 | broswer |
您可以繼續參考
JavaScript 範例
定位相關
相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁
參考資料
http://www.w3.org/TR/CSS21/visufx.html
https://developer.mozilla.org/en/CSS/overflow
2 則留言:
請問您在最上面，對只有div的部分做宣告。
這個步驟如果沒有做的話，是不是overflow的效果就會失去 ?
最上面 div 的部分是對全部 div 都要遵守的規則，至於底下 visible 、 hidden 等則是給不同的 div 設定的規則。
張貼留言