外边距：同级塌陷,嵌套传递,自动挤压案例：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距</title> <link rel="stylesheet" href="static/css/style10.css"> </head> <body> <!--同级塌陷--> <div class="box1"></div> <div class="box2"></div> <hr> <!--嵌套传递--> <div class="box3"> <div class="box4"> </div> <!--自动挤压--> <!--<div class="box5"></div>--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box1{
margin-bottom: 30px;
}
.box2{
margin-top: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4{
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box4{
margin-top: 0px;
}
.box3{
padding-top: 50px;
height: 150px;
}
.box5{
width: 100px;
height: 100px;
background-color: lightcoral;
margin:50px auto ;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
内边距对盒中内容的影响，解决的三种方案：
第一种方式：
CSS实例
.box{
width: 300px;
height: 300px;
background-color: aquamarine;
border: 1px solid black;
}
.box{
padding: 50px;
}
.box{
width: 200px;
height: 200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
第二种方式：
CSS实例
.wrap{
width: 300px;
}
/*嵌套盒子之间只有宽度可以继承*/
.box1{
/*height: 300px;*/
background-color: aquamarine;
border: 1px solid black;
padding: 50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
第三种方式：
CSS实例
.box2{
width: 300px;
/*父盒子的宽度作用到边框上*/
box-sizing: border-box;
background-color: lightblue;
border: 1px solid red;
padding: 50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
浮动的实现原理与清除的技巧：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <link rel="stylesheet" href="static/css/style11.css"> </head> <body> <!--浮动--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2{
width: 180px;
height: 180px;
background-color: lightcoral;
}
.box3{
width: 200px;
height: 300px;
background-color: lightsalmon;
}
.box4{
width: 100%;
height: 60px;
background-color: gray;
}
.box1{
/*浮动*/
float: left;
}
.box2{
/*浮动*/
float: left;
}
.box3{
/*浮动*/
float: right;
}
.box4{
clear: both;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
相对定位与绝对定位的区别与联系：
相对定位：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <link rel="stylesheet" href="static/css/style12.css"> </head> <body> <!--相对定位--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
.box1{
width: 150px;
height: 150px;
background-color: lightsalmon;
}
.box2{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box3{
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box4{
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box5{
width: 150px;
height: 150px;
background-color: lightpink;
}
.box1{
position: relative;
left: 150px;
}
.box3{
position: relative;
left: 150px;
top: -150px;
}
.box4{
position: relative;
left: 300px;
top: -300px;
}
.box5{
position: relative;
left: 150px;
top: -300px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
绝对定位：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <link rel="stylesheet" href="static/css/style13.css"> </head> <body> <!--绝对定位--> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div> <!--<div style="height: 300px;width: 300px;background-color: yellow;position: absolute">--> <!-- <div style="height: 100px;width:100px;background-color: red;position: absolute;top:30px;left:30px;"></div>--> <!--</div>--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
.parent{
border: 1px dotted black;
width: 450px;
height: 450px;
position: relative;
}
.box1{
width: 150px;
height: 150px;
background-color: lightsalmon;
}
.box2{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box3{
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box4{
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box5{
width: 150px;
height: 150px;
background-color: lightpink;
}
.box1{
position: absolute;
left: 150px;
}
.box2{
position: relative;
top: 150px
}
.box3{
position: relative;
left: 300px;
top: 0px
}
.box4{
position: relative;
left: 150px;
top: -150px;
}
.box5{
position: relative;
left: 150px;
top: -150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
模仿登录界面定位案例：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小茗Ub生活网</title> <link rel="stylesheet" href="static/css/style14.css"> </head> <body> <div class="shade"></div> <div class="login"><img src="static/images/小茗Ub生活网登录.png"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
body{
margin: 0;
background-image: url("../images/小茗Ub生活网.png");
background-size: cover;
background-repeat: no-repeat;
}
.shade{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login img{
width: 300px;
height: 380px;
}
.login{
background-color: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -190px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
模仿广告窗案例：
Html实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告</title> <link rel="stylesheet" href="static/css/style15.css"> </head> <body> <div class="abs"> <bytton onclick="this.parentNode.style.display = 'none'">X</bytton> <h2>小茗Ub生活网</h2> <h1>火爆招商中。。。</h1> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS实例
body{
height: 7000px;
}
.abs{
width: 350px;
height: 250px;
background-color: lightblue;
position: fixed;
right: 0;
bottom: 0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
