CSS中overflow屬性的值有哪些

發(fā)布時(shí)間：2022-03-02 09:46:26 來源：億速云閱讀：1103 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS中overflow屬性的值有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　我們首先來看一下overflow屬性的值有哪些？

　　overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

　　overflow有以下四個(gè)屬性值

　　visible：初始值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

　　scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

　　hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

　　auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

　　下面我們來詳細(xì)說一說overflow屬性的這四個(gè)值

　　我們來看具體的示例

　　代碼如下

　　HTML代碼

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>CSSoverflow</title>

　　<linkrel="stylesheet"type="text/css"href="sample.css">

　　</head>

　　<body>

　　<divclass="hid">

　　<p>

　　TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.

　　</p>

　　</div>

　　<br>

　　<divclass="scr">

　　<p>

　　</p>

　　</div>

　　<br>

　　<divclass="vis">

　　<p>

　　</p>

　　</div>

　　</body>

　　</html>

　　CSS代碼

　　/*hidden*/

　　div.hid{

　　width:200px;

　　height:100px;

　　overflow:hidden;

　　background-color:#FF9999;

　　}

　　/*scroll*/

　　div.scr{

　　width:200px;

　　height:100px;

　　overflow:scroll;

　　background-color:#99FF99;

　　}

　　/*visible*/

　　div.vis{

　　width:200px;

　　height:100px;

　　overflow:visible;

　　background-color:#9999FF;

　　}

以上是“CSS中overflow屬性的值有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS中overflow屬性的值有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽