一.外边距的三个特征：同级塌陷，嵌套传递，自动挤压
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work2.css">
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color:lightblue;
}
.box2{
width:100px;
height:100px;
background-color:lightcoral;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:80px;
}
.box3{
width:200px;
height:200px;
background-color:lightblue;
}
.box4{
width:100px;
height:100px;
background-color:lightcoral;
}
.box4{
margin-top:50px;
}
.box4{
margin-top:0px;
}
.box3{
padding-top:50px;
height:150px;
padding-left:50px;
width:150px;
}
.box5{
width:100px;
height:100px;
background-color:lightcoral;
mmargin:auto;
}
</style>
</head>
<body>
<!--同级塌陷-->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<!--嵌套传递-->
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<!--自动挤压-->
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二.内边距对盒中内容的影响:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="2.css">
<style type="text/css">
.box1{
width:300px;
background-color:lightgreen;
border:1px solid black;
}
.box1{
padding:50px;
}
.box1{
width:200px;
}
.box2{
width:300px;
}
.box3{
padding:50px;
background-color:lightblue;
border:1px solid black;
}
.box4{
width:300px;
background-color:lightpink;
border:1px solid black;
padding:50px;
box-sizing:border-box;
}
</style>
</head>
<body>
<!--1.层叠样式表，重设原先盒子宽度-->
<div class="box1">
<img src="images/girl.jpg" alt="女孩图片" width="200">
</div>
<!--2.宽度分离-->
<div class="box2">
<div class="box3">
<img src="images/girl.jpg" alt="女孩图片" width="200">
</div>
</div>
<!--3.box-sizing-->
<div class="box4">
<img src="images/girl.jpg" alt="女孩图片" width="200">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三.浮动的实现以及清除
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work3.css">
<style type="text/css">
.box1{
width:150px;
height:150px;
background-color:lightblue;
}
.box2{
width:180px;
height:180px;
background-color:lightcoral;
}
.box1{
float:left;
}
.box2{
float:left;
}
.box3{
width:200px;
height:200px;
background-color:lightgreen;
}
.box3{
float:right;
}
.box4{
height:100px;
background-color:lightgray;
}
.box4{
clear:left;
clear:right;
clear:both;
}
</style>
</head>
<body>
<!--浮动-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四.相对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work4.css">
<style type="text/css">
.box1{
width:150px;
height:150px;
background-color:lightblue;
}
.box2{
width:150px;
height:150px;
background-color:lightgray;
}
.box3{
width:150px;
height:150px;
background-color:lightgreen;
}
.box4{
width:150px;
height:150px;
background-color:lightcoral;
}
.box5{
width:150px;
height:150px;
background-color:lightseagreen;
}
.box1{
position: relative;
left:150px;
}
.box2{
}
.box3{
position: relative;
left:300px;
top:-150px;
}
.box4{
position: relative;
left:150px;
top:-300px;
}
.box5{
position: relative;
left:150px;
top:-300px;
}
</style>
</head>
<body>
<!--相对定位-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五.绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work5.css">
<style type="text/css">
.parent{
position:relative;
border:1px solid gray;
width:450px;
height:450px;
}
.box1{
width:150px;
height:150px;
background-color:lightblue;
}
.box2{
width:150px;
height:150px;
background-color:lightgray;
}
.box3{
width:150px;
height:150px;
background-color:lightgreen;
}
.box4{
width:150px;
height:150px;
background-color:lightcoral;
}
.box5{
width:150px;
height:150px;
background-color:lightseagreen;
}
.box1{
position:absolute;
left:150px;
}
.box2{
position: absolute;
top:150px;
}
.box3{
position: absolute;
left:150px;
top:150px;
}
.box4{
position: absolute;
left:300px;
top:150px;
}
.box5{
position: absolute;
left:150px;
top:300px;
}
</style>
</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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
案例1:仿php中文网登录(遮罩+绝对定位)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work6.css">
<style type="text/css">
body{
margin:0px;
background-image: url(images/php.jpg);
background-size:cover;
}
.shade{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:black;
opacity: 0.6;
}
.login img{
width:380px;
height:460px;
}
.login{
background:white;
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-230px;
}
</style>
</head>
<body>
<!--绝对定位之遮罩-->
<div class="shade"></div>
<div class="login"><img src="images/login.jpg" alt="这是一张图片"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
案例2:固定定位广告展示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="work7.css">
<style type="text/css">
body{
height:2000px;
}
.ads{
width:350px;
height:250px;
background-color:lightblue;
position: fixed;
right:0;
bottom:0;
}
button{
float:right;
margin-top:10px;
margin-right:20px;
border:none;
background:none;
color:red;
font-size:2em;
}
</style>
</head>
<body>
<h1>固定定位:广告栏</h1>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">X</button>
<h2>贪玩蓝月</h2>
<h1>.....</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码中涉及知识点注释总结:
想要实现居中显示不可以直接使用padding,有三种解决方案:重设盒子宽度/宽度分离/box-sizing盒尺寸
重设盒子宽度:文档结构简单,但是要修改原盒子大小宽度分离:不需要修改原盒子大小,但需要增加一个容器盒子box-sizing:这种方法时首选项- 绝对定位:根据父元素进行定位,并跳出文档流相对定位:根据元素在文档中的初始位置进行定位
- 做完浮动效果要进行清除浮动,以免影响接下来的布局