今天是学习前端第五的学习内容，内容如下：
1.高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度塌陷 </title>
<style type="text/css">
.box{
border: 10px red solid;
}
.box1{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.box2{
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
运行结果：
image.png
2.解决高度塌陷1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解决高度塌陷1</title>
<style type="text/css">
.box{
border: 10px red solid;
/*能解决有缺陷*/
/*float: left;*/
/*display: inline-block;*/
/*能解决缺陷最小 经常用overflow: hidden; zoom:1 两句一起写*/
overflow: hidden;
zoom:1;
}
.box1{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.box2{
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
运行结果：
image.png
3.导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
*{
margin:0px;
padding: 0;
}
.nav{
/*去掉小圆点*/
list-style: none;
/*颜色*/
background-color: #6495ed;
/*宽度*/
width: 1000px;
/*居中*/
margin:50px auto;
/*阻止塌陷*/
overflow: hidden;
zoom: 1;
}
.nav li{
/*浮动 让它左浮动*/
float: left;
/*继承上面4/1*/
width: 25%;
}
.nav a{
display: block;
/*继承上面4/1的100%*/
width: 100%;
/*距离*/
padding: 5px 0;
/*让文字具中间*/
text-align: center;
/*去掉下划线*/
text-decoration:none;
/*字母加粗*/
font-weight: bold;
color: #fff;
}
.nav a:hover{
/*鼠标点击颜色*/
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
运行结果：
image.png
image.png
4.清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动 </title>
<style type="text/css">
.dox{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.dox1{
width: 200px;
height: 200px;
background-color: blue;
/*可以清除浮动 clear: */
clear: left;
}
.dox2{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="dox"> </div>
<div class="dox1"> </div>
<div class="dox2"> </div>
</body>
</html>
运行结果：
image.png
- 解决塌陷2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 解决塌陷2</title>
<style type="text/css">
.dox{
border: 1px solid red;
}
.dox1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*没有浮动 可以撑开dox1*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="dox">
a
<div class="dox1"> </div>
<div class="clear"> </div>
</div>
</body>
</html>
运行结果：
image.png
6.解决塌陷2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 解决塌陷2</title>
<style type="text/css">
.dox{
border: 1px solid red;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.dox1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="dox clearfix">
<div class="dox1"> </div>
</div>
</body>
</html>
运行结果：
image.png
7.相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.dox{
width: 100px;
height: 100px;
background-color: red;
}
.dox1{
width: 100px;
height: 100px;
background-color: blue;
/*定位 能让它移动 左右上下*/
position: relative;
left: 100px;
top:100px;
}
.dox2{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="dox"> </div>
<div class="dox1"> </div>
<div class="dox2"> </div>
</body>
</html>
运行结果：
image.png
8.绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.dox{
width: 100px;
height: 100px;
background-color: red;
}
.dox1{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0px;
top: 0px;
}
.dox2{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="dox"> </div>
<div class="dox1"> </div>
<div class="dox2"> </div>
</body>
</html>
运行结果：
image.png
9.固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
.dox{
width: 100px;
height: 100px;
background-color: red;
}
.dox1{
width: 100px;
height: 100px;
background-color: blue;
position:fixed;
left: 0px;
top: 0px;
}
.dox2{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="dox"> </div>
<div class="dox1"> </div>
<div class="dox2"> </div>
</body>
</html>
运行结果：
image.png
网友评论