小编给大家分享一下CSS中overflow属性的值有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 我们首先来看一下o
小编给大家分享一下CSS中overflow属性的值有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
我们首先来看一下overflow属性的值有哪些？
overflow属性规定当内容溢出元素框时发生的事情。
overflow有以下四个属性值
visible：初始值，内容不会被修剪，会呈现在元素框之外。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
hidden：内容会被修剪，并且其余内容是不可见的。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
下面我们来详细说一说overflow属性的这四个值
我们来看具体的示例
代码如下
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>
TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.
</p>
</div>
<br>
<divclass="vis">
<p>
TheEuropeanlanguagesaremembersofthesamefamily.Theirseparateexistenceisamyth.Forscience,music,sport,etc,Europeusesthesamevocabulary.Thelanguagesonlydifferintheirgrammar,theirpronunciationandtheirmostcommonwords.Everyonerealizeswhyanewcommonlanguagewouldbedesirable:onecouldrefusetopayexpensivetranslators.
</p>
</div>
</body>
</html>
CSS代码
div.hid{
width:200px;
height:100px;
overflow:hidden;
background-color:#FF9999;
}
div.scr{
width:200px;
height:100px;
overflow:scroll;
background-color:#99FF99;
}
div.vis{
width:200px;
height:100px;
overflow:visible;
background-color:#9999FF;
}
以上是“CSS中overflow属性的值有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！
--结束END--
本文标题: CSS中overflow属性的值有哪些
本文链接: https://www.lsjlt.com/news/90199.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0