一 display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
<!--.c1{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:darkorange;-->
<!--}--> <!--.c2{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:green;-->
<!--<!–display:none;–>-->
<!--}--> <!--.c3{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:rebeccapurple;-->
<!--}--> <!--.outer:hover .c2{-->
<!--display:none;-->
<!--}--> div{
width:200px;
height:200px;
bockground-color:green;
display:inline;
} span{
width:200px;
height:200px;
background-color:wheat;
display:block;
} </style>
</head>
<body> <div>DIV</div> <span>span</span> <!--<div class="c1"></div>--> <!--<div class="outer">-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->
<!--</div>--> </body>
</html>
二 inline-block属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin:;
padding:;
} .c1{
width:100px;
height:200px;
background-color:darkorange;
display:inline-block;
} .c2{
width:200px;
height:200px;
background-color:green;
display:none;
margin-lift:-4px;
} .c3{
width:300px;
height:200px;
background-color:rebeccapurple;
display:inline-block;
margin-left:-5px;
} ul li{
list-style:none;
}
ul li a{
width:20px;
height:20px;
float:left;
padding:20px;
margin-left:5px;
background-color:wheat;
} </style>
</head>
<body> <a class="c1"></a> <div class="c2"></div>
<div class="c3"></div> <ul>
<li class="item"><a href="">1</a> </li>
<li class="item"><a href="">2</a> </li>
<li class="item"><a href="">3</a> </li>
<li class="item"><a href="">4</a> </li>
<li class="item"><a href="">5</a> </li>
<li class="item"><a href="">6</a> </li>
<li class="item"><a href="">7</a> </li>
<li class="item"><a href="">8</a> </li>
</ul> </body>
</html>
三float 父级塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
padding:;
} .box1,.box2{
float:left;
width:50%;
height:60px;
} .box1{
background-color:wheat;
} .box2{
background-color:green;
}
.content{
width:100%;
height:60px;
background-color:greenyellow;
} .header{
border:red 1px solid;
} .clearfix:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body> <div class="header clearfix"> <div class="box1"></div>
<div class="box2"></div> </div> <div class="content"></div> </body>
</html>
四 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin :0px;
} .div1{
background-color:rebeccapurple;
width:200px;
height:100px;
float:left;
} .div2{
background-color:teal;
width:200px;
height:200px;
float:left;
clear:left;
} .div3{
background-color:green;
width:100px;
height:300px;
float:left;
clear:right;
}
</style>
</head>
<body> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
五 a标签锚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fang1{
width:100%;
height:1000px;
background-color:wheat;
} .fang2{
width:100%;
height:1000px;
background-color:red;
}
.fang3{
width:100%;
height:1000px;
background-color:green;
} </style>
</head>
<body> <ul>
<li><a href="#c1">第一章</a></li>
<li><a href="#c2">第二章</a></li>
<li><a href="#c3">第三章</a></li>
</ul> <div class="fang1" id="c1">第一章</div>
<a href="#">返回顶端</a>
<div class="fang2" id="c2">第二章</div>
<a href="#">返回顶端</a>
<div class="fang3" id="c3">第三章</div>
<a href="#">返回顶端</a>
</body>
</html>
六 position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
body{
margin:0px;
} .div1{
background-color:rebeccapurple;
width:200px;
height:200px;
} .div2{
background-color:green;
width:200px;
height:200px;
position:absolute;
left:200px;
top:200px; <!--position:relatinve--------;1, 参照物是以自己原来在文档流的位置 -->
<!--2 物理位置依然存在--> } .div3{
background-color:teal;
width:200px;
height:200px;
}
.father_box{
position:relative;
border: 2px solid red;
}
</style>
</head>
<body> <div class="div1"></div> <div class="father_box">
<div class="div2"></div>
<div class="div3"></div>
</div> </body>
</html>
七fix定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width:100%;
height:2000px;
background-color:wheat;
} .returnTop{
width:90px;
height:35px;
text-indent:10px;
background-color:grey;
color:white;
tsxt-align:center;
line-height:35px;
position:fixed;
right:20px;
bottom:20px;
}
</style>
</head>
<body> <div class="c1"></div> <div class="returnTop">返回顶部</div> </body>
</html>
八 marging塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0px;
} .div1{
background-color:rebeccapurple;
width:300px;
height:300px; overflow:hidden;
<!--border:1px solid rebeccapurple;-->
<!--padding:1px;-->
}
.div2{
background-color:green;
width:100px;
height:100px;
margin-top:20px;
} .div3{
background-color:teal;
width:100px;
height:100px;
}
</style>
</head>
<body> <div style="background-color: bisque;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div> </body>
</html>
九 txet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
padding:;
} ul li{
list-style:none;
}
</style>
</head>
<body> <ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</body>
</html>