本章主要是对Css中的overflow元素进行讲解:
该元素主要是用来处理,当我们的文本超出指定文本框时,如何进行处理
首先分别讲一下overflow的五大属性:
visiable:当我们的文本超出文本框时,其内容不会被修剪,会显示在文本框之外
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:50px;
height:60px;
overflow:visiable;
}
</style>
</head>
<body>
<div id="cc">
<h>采用visiable,当文本超出指定的文本框时,其内容不会被修剪,其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>
hidden:隐藏属性,很容易理解,当文本超出文本框时,就会被隐藏,即多余的文本会被修剪不可见
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:yellow;
padding:20px 20px;
width:50px;
height:60px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="cc">
<p>采用hidden,当文本超出指定的文本框时,其内容会被修剪,且不可见</p>
</div>
</body>
</html>
scroll:采用scroll属性,不管文本是否会超出文本框,都会出现滚动栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:200px;
height:200px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="cc">
<h>采用scroll,当文本超出指定的文本框时,其内容不会被修剪,其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>
auto:与上面的scroll稍有一点不同,相对来说更加智能一点,当文本超出文本框范围时,会出现滚动栏,当文本未超出文本框范围时,不会出现滚动栏,更加智能更加人性化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:200px;
height:200px;
overflow:auto;
}
</style>
</head>
<body>
<div id="cc">
<h>采用auto,当文本超出指定的文本框时,其内容不会被修剪,其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<div id="cc">
<h>采用auto,当文本超出指定的文本框时,其内容不会被修剪,其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>
inherit:继承,采用这个属性,其会继承父类的overflow属性,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<div id="cc">
<h>我是父类</h>
<div id="c0">
<h>采用inherit,会继承上面父类的属性</h>
</div>
</div>
</body>
</html>