細(xì)說CSS3中box屬性中的overflow-x屬性和overflow-y屬性值的效果

字號:


    大家可以發(fā)現(xiàn),上網(wǎng)站上查詢之后會得到overflow-x和overflow-y的一大堆屬性值,但很多網(wǎng)站并沒有詳細(xì)說明各屬性值的效果,我們今天細(xì)說一下。
    各屬性值如下:
    visible:默認(rèn)值,不裁剪內(nèi)容,可能會顯示在內(nèi)容框之外
    hidden:裁剪內(nèi)容 - 不提供滾動機制
    scroll:裁剪內(nèi)容 - 提供滾動機制
    auto:如果溢出框,則應(yīng)該提供滾動機制,否則正常顯示
    no-display:如果內(nèi)容不適合內(nèi)容框,則刪除整個框,但目前該屬性值不被支持
    no-content:如果內(nèi)容不適合內(nèi)容框,則隱藏整個內(nèi)容,但目前該屬性值不被支持
    這里值得再細(xì)說一下的是visible。我們一般會給overflow-x和overflow-y各分配一個屬性值,來分別規(guī)定水平方向和豎直方向的顯示方式,visible只有和visible搭配才會有那種“完全顯示而顯示在框外”的效果,否則都等同于scroll,不過一般情況下,盒子在一個方向上的尺寸小于51px時不會顯示滾動條。當(dāng)然,這里沒有考慮no-display和no-content,因為這兩個目前不被支持,所以等同于賦了默認(rèn)值,即visible。