建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS滾動條樣式（overflow）
通過《CSS盒子模型》一節(jié)的學習我們知道，頁面中的每個元素都可以看作是一個矩形的盒子，我們可以使用 CSS 來控制盒子的大小、位置等等信息。默認情況下，當元素中的內(nèi)容超出盒子的大小時，例如元素內(nèi)容區(qū)的寬度和高度所組成的矩形區(qū)域中不足以容納元素中的內(nèi)容時，一部分內(nèi)容就會溢出盒子。
圖：overflow 屬性演示
1. overflow
為了能更好的處理溢出的內(nèi)容，CSS 中提供了一個名為 overflow 的屬性，該屬性可以設(shè)置如何處理溢出元素內(nèi)容區(qū)的內(nèi)容，屬性的可選值如下表所示：
| 值 | 描述 |
|---|---|
| visible | 默認值，對溢出的內(nèi)容不做處理，內(nèi)容會在元素內(nèi)容區(qū)之外顯示 |
| hidden | 隱藏溢出元素內(nèi)容區(qū)的內(nèi)容 |
| scroll | 隱藏溢出元素內(nèi)容區(qū)的內(nèi)容，并在元素的左側(cè)和下方分別創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的所有內(nèi)容 |
| auto | 如果出現(xiàn)內(nèi)容溢出，則會在元素左側(cè)創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的全部內(nèi)容 |
| inherit | 從父元素繼承 overflow 屬性的值 |
【示例】使用 overflow 屬性設(shè)置如何處理元素內(nèi)容區(qū)溢出的內(nèi)容：
visible：默認值，對溢出的內(nèi)容不做處理，內(nèi)容會在元素內(nèi)容區(qū)之外顯示；
hidden：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容；
scroll：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容，并在元素的左側(cè)和下方分別創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的所有內(nèi)容；
auto：如果出現(xiàn)內(nèi)容溢出，則會在元素左側(cè)創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的全部內(nèi)容；
inherit：從父元素繼承 overflow 屬性的值。
visible：默認值，對溢出的內(nèi)容不做處理，內(nèi)容會在元素內(nèi)容區(qū)之外顯示；
hidden：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容；
scroll：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容，并在元素的左側(cè)和下方分別創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的所有內(nèi)容；
auto：如果出現(xiàn)內(nèi)容溢出，則會在元素左側(cè)創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的全部內(nèi)容；
inherit：從父元素繼承 overflow 屬性的值。
visible：默認值，對溢出的內(nèi)容不做處理，內(nèi)容會在元素內(nèi)容區(qū)之外顯示；
hidden：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容；
scroll：隱藏溢出元素內(nèi)容區(qū)的內(nèi)容，并在元素的左側(cè)和下方分別創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的所有內(nèi)容；
auto：如果出現(xiàn)內(nèi)容溢出，則會在元素左側(cè)創(chuàng)建一個滾動條，通過滑動滾動條可以查看元素中的全部內(nèi)容；
inherit：從父元素繼承 overflow 屬性的值。
運行結(jié)果如下圖所示：
圖：overflow 屬性演示
2. overflow-x、overflow-y
在 CSS3 中還提供了 overflow-x 和 overflow-y 兩個屬性，它們的作用與 overflow 屬性相似，屬性的可選值與 overflow 屬性相同，其中：
- overflow-x：設(shè)置當元素內(nèi)容區(qū)的內(nèi)容在水平方向上溢出元素時如何處理溢出的內(nèi)容；
- overflow-y?：設(shè)置當元素內(nèi)容區(qū)的內(nèi)容在垂直方向上溢出元素時如何處理溢出的內(nèi)容。
提示：當單獨設(shè)置 overflow-x 或 overflow-y 其中的一個屬性為非 visible 時，另外一個屬性將自動設(shè)置為 auto。另外，因為 CSS3 還沒有最終定稿，所以這兩個屬性的作用可能會變更或調(diào)整。
標題名稱：CSS滾動條樣式（overflow）
網(wǎng)頁網(wǎng)址：http://m.5511xx.com/article/dpsgegi.html
