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