1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端---css中的overflow属性如何使用

前端---css中的overflow属性如何使用

时间:2022-02-28 05:43:00

相关推荐

前端---css中的overflow属性如何使用

CSSoverflow属性

属性定义及使用说明

overflow属性指定如果内容溢出一个元素的框,会发生什么。

属性值

在这里我们写一个小的演练来看一下分别对不同的div设置不同的overflow属性会有什么结果:

我们先来看源码:

<title>overflow属性</title> <style>div.ex1 {background-color: lightblue;width: 110px;height: 110px;overflow: scroll;float:left;}div.ex2 {background-color: lightblue;width: 110px;height: 110px;overflow: hidden;float:left;}div.ex3 {background-color: lightblue;width: 110px;height: 110px;overflow: auto;float:left;}div.ex4 {background-color: lightblue;width: 110px;height: 110px;overflow: visible;float:left;}</style></head><body><h1>overflow 属性</h1><p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p><h2>overflow: scroll:</h2><div class="ex1">这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!</div><h2>overflow: hidden:</h2><div class="ex2">这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!</div><h2>overflow: auto:</h2><div class="ex3">这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!</div><h2>overflow: visible (默认):</h2><div class="ex4">这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!-------这里是overflow属性!!!</div></body></html>

我们再来这段代码的结果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。