Web前端开发，自学笔记整理
溢出属性
1.溢出属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出属性</title>
<style type="text/css">
.info1 {
width: 300px;
height: 100px;
background: red;
/*溢出属性
auto: 如果文本超出，自动加上滚动条
hidden: 超出部分隐藏
*/
overflow: hidden;
}
.box1 {
overflow: auto;
}
.info2 {
width: 300px;
height: 100px;
background: lightblue;
/*跟随父元素box的属性*/
overflow: inherit;
}
</style>
</head>
<body>
<div class="info1">
太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。
太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。
</div>
<br />
<div class="box1">
<div class="info2">
太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。
太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。太阳当空照，花儿对我笑。
</div>
</div>
</body>
</html>
2. 溢出属性应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出属性应用</title>
<style type="text/css">
.view1 {
width: 300px;
height: 100px;
background: lightcoral;
margin: 30px;
float: left;
}
.view2 {
height: 100px;
background: lightgreen;
margin: 50px;
float: left;
}
.box {
width: 400px;
height: 400px;
background:lightsalmon;
/*避免受到子类影响，添加溢出属性即可*/
overflow: hidden;
}
.smallBox {
width: 200px;
height: 200px;
background: lightcoral;
/*垂直方向不生效，而且父类会受到影响*/
margin: 100px;
}
</style>
</head>
<body>
<!--问题1: 上下都有margin值时取最大的那个值
margin-bottom:30px;
margin-top:50px;
解决方式：设置float
-->
<!--<div class="view1"></div>
<div class="view2"></div>-->
<div class="box">
<div class="smallBox"></div>
</div>
</body>
</html>3. 文本溢出属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出属性</title>
<style type="text/css">
.info1 {
height: 20px;
background: lightblue;
/*文本溢出属性
单独使用没有效果
clip: 剪切掉 ellipsis: 省略号
*/
/*text-overflow: clip;*/
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul li {
/*1.给盒子设定宽度*/
width: 300px;
/*2.强制显示为一行*/
white-space: nowrap;
/*3.将超出部分隐藏*/
overflow: hidden;
/*4.使用文本溢出属性*/
text-overflow: ellipsis;
}
ul li a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<p class="info1">
你可以不聪明，但不可以不努力。
你可以不聪明，但不可以不努力。
</p>
<br />
<ul>
<li><a href="#">2018年春运情况2018年春运情况2018年春运情况2018年春运情况</a></li>
<li><a href="#">2018年春运情况2018年春运情况2018年春运情况</a></li>
<li><a href="#">2018年春运情况2018年春运情况2018年春运情况2018年春运情况2018年春运情况</a></li>
</ul>
</body>
</html>