1. overflow

為了能更好的處理溢出的內(nèi)容，CSS 中提供了一個名為 overflow 的屬性，該屬性可以設(shè)置如何處理溢出元素內(nèi)容區(qū)的內(nèi)容，屬性的可選值如下表所示：

【示例】使用 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é)果如下圖所示：

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)整。