教你玩轉CSS Overflow-有解無憂

CSS 布局 - Overflow

CSS overflow 屬性用于控制內容溢位元素框時顯示的方式，

    <style>
        #overflowTest {
            background: #4CAF50;
            color: white;
            padding: 15px;
            width: 80%;
            height: 100px;
            overflow: scroll;
            border: 1px solid #ccc;
        }
    </style>
    <div id="overflowTest">
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向，</p>
    </div>

CSS Overflow

CSS overflow 屬性可以控制內容溢位元素框時在對應的元素區間內添加滾動條，

overflow屬性有以下值：

值	描述
visible	默認值，內容不會被修剪，會呈現在元素框之外
hidden	內容會被修剪，并且其余內容是不可見的
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容
inherit	規則應該從父元素繼承overflow屬性的值

注意:overflow 屬性只作業于指定高度的塊元素上，

注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設定 “overflow:scroll” 也是一樣的)，

overflow: visible

默認情況下，overflow 的值為 visible，意思是內容溢位元素框：

代碼演示：

    <style>
        div.visible {
            padding: 4px;
            background-color: #eee;
            width: 200px;
            height: 100px;
            overflow: visible;
            xborder: 1px dotted red;
        }
    </style>
    <div class="visible">
        <p>這里的文本內容會溢位元素框，</p>
        <p>這里的文本內容會溢位元素框，</p>
        <p>這里的文本內容會溢位元素框，</p>
        <p>這里的文本內容會溢位元素框，</p>
        <p>這里的文本內容會溢位元素框，</p>
    </div>

效果演示：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/260906.html

標籤：Html/Css

上一篇：一篇文章精通CSS文本的問題，值得一看。

下一篇：如何玩轉CSS鏈接（link）的知識點？