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