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

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

1577370495235_學IT就到黑馬程序員.gif

當盒子內(nèi)的標簽超出盒子自身的大小時，內(nèi)容就會溢出，如圖1所示。

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

圖 1 內(nèi)容溢出

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

選擇器{overflow:屬性值;}

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

表1 overflow的常用屬性值

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

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

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

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

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

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

overflow:scroll;   /*始終顯示滾動條*/

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

猜你喜歡：

怎么配置Spring容器中的Bean？【java培訓】

最新資訊