CSS(層疊樣式表)是用來控制網(wǎng)頁(yè)樣式的一種標(biāo)準(zhǔn)語(yǔ)言。其中,設(shè)置 div 超出隱藏是常見的一種需求。下面是一個(gè)實(shí)例。
div {
width: 200px;
height: 100px;
overflow: hidden;
}
以上代碼中,設(shè)置 div 的寬度為 200 像素,高度為 100 像素。而 overflow 屬性用來決定當(dāng)內(nèi)容超出容器尺寸時(shí),如何處理超出部分。
overflow 屬性有以下幾個(gè)可能的值:
- visible:默認(rèn)值。不剪裁內(nèi)容,可能會(huì)覆蓋容器外部。
- hidden:剪裁超出的內(nèi)容,不會(huì)顯示在容器外部。
- scroll:在容器內(nèi)生成滾動(dòng)條,使內(nèi)容可滾動(dòng)查看。
- auto:在必要時(shí)生成滾動(dòng)條,使內(nèi)容可滾動(dòng)查看。
在以上代碼中,通過設(shè)置 overflow 屬性為 hidden,超出容器尺寸的內(nèi)容將被剪裁掉,不會(huì)顯示在容器外部。
除了 overflow 屬性,還有一些屬性可以實(shí)現(xiàn)相同的效果。比如,使用 clip 屬性可以實(shí)現(xiàn)剪裁,需要設(shè)置剪裁的 left、right、top 和 bottom 值。不過,為了更方便和簡(jiǎn)單,一般情況下還是使用 overflow 屬性來設(shè)置超出容器部分的處理方式。