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>