CSS可以讓層滾動(dòng)條滾動(dòng),這對(duì)于長(zhǎng)內(nèi)容的層非常有用。
要實(shí)現(xiàn)這一效果,需要設(shè)置層的高度并將其屬性設(shè)置為“overflow: auto;”。
div { height: 200px; overflow: auto; }
上面的代碼表示:將div層的高度設(shè)置為200像素,并使其內(nèi)容溢出時(shí)顯示滾動(dòng)條。
需要注意的是,如果設(shè)置為“overflow: hidden;”,則內(nèi)容會(huì)被隱藏,而無法使用滾動(dòng)條。
至于層的寬度,如果內(nèi)容不會(huì)水平溢出,則不需要設(shè)置寬度。但是,如果內(nèi)容水平溢出,則需要使用以下代碼:
div { width: 200px; white-space: nowrap; overflow: auto; }
上面的代碼表示:將div層的寬度設(shè)置為200像素,并使其內(nèi)容不換行,當(dāng)內(nèi)容溢出時(shí)顯示水平滾動(dòng)條。
總之,CSS的“overflow”屬性可以幫助我們實(shí)現(xiàn)層的滾動(dòng)條效果,使長(zhǎng)內(nèi)容更易于閱讀。