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>
我们再来这段代码的结果: