overflow屬性如何控制CSS盒子樣式，實(shí)現(xiàn)內(nèi)容自適應(yīng)？

更新時(shí)間:2021-05-24 來源:黑馬程序員瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

當(dāng)盒子內(nèi)的標(biāo)簽超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出，如圖1所示。

1621933653348_內(nèi)容溢出.jpg

圖 1 內(nèi)容溢出

這時(shí)如果想要處理溢出內(nèi)容的顯示樣式，就需要使用CSS的overflow屬性。overflow屬性用于規(guī)定溢出內(nèi)容的顯示狀態(tài)，其基本語法格式如下。

選擇器{overflow:屬性值;}

在上面的語法中，overflow屬性的常用值有四個(gè)，具體如表1所示。

表1 overflow的常用屬性值

**\屬性值	描述
visible	內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在標(biāo)簽框之外（默認(rèn)值）
hidden	溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見的
auto	在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容
scroll	溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條

如果希望溢出的內(nèi)容被修剪，且不可見，可將overflow的屬性值修改為hidden。示例代碼如下：

overflow:hidden;     /*溢出內(nèi)容被修剪，且不可見*/

如果希望標(biāo)簽框能夠自適應(yīng)內(nèi)容的多少，并且在內(nèi)容溢出時(shí)，產(chǎn)生滾動(dòng)條，未溢出時(shí)，不產(chǎn)生滾動(dòng)條，可以將overflow的屬性值設(shè)置為auto。示例代碼如下：

overflow:auto;     /*根據(jù)需要產(chǎn)生滾動(dòng)條*/

值得一提的是，當(dāng)定義overflow的屬性值為scroll時(shí)，標(biāo)簽框中也會(huì)產(chǎn)生滾動(dòng)條。示例代碼如下：

overflow:scroll;   /*始終顯示滾動(dòng)條*/

與“overflow: auto;”不同，當(dāng)定義“overflow: scroll;”時(shí)，不論標(biāo)簽是否溢出，標(biāo)簽框中的水平和豎直方向的滾動(dòng)條都始終存在。

猜你喜歡：

怎么配置Spring容器中的Bean？【java培訓(xùn)】

最新資訊