外边距三大特征：同级塌陷，嵌套传递，自动挤压
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="">-->
<style>
.box1{
width:100px;
height:100px;
background-color: lightcoral;
/*添加下外边距30px*/
margin-bottom: 30px;
}
.box2{
width:150px;
height: 150px;
background-color: brown;
/*添加上外边距50px*/
margin-top: 50px;
}
.box3{
display: inline-block;
width:100px;
height:100px;
background-color: lightcoral;
/*添加右外边距30px*/
margin-right: 30px;
}
.box4{
display: inline-block;
width:150px;
height: 150px;
background-color: brown;
/*添加左外边距50px*/
margin-left: 50px;
}
.box5{
width:150px;
height: 150px;
background-color: cadetblue;
}
.box6{
width:100px;
height:100px;
background-color: lawngreen;
/*若想让box6居中显示，可能会使用box6设置外边距使其居中*/
/*演示如下*/
margin-top: 25px;
/*显示如果如图所示，box6的外边距效果显示在box5上，没有达到我想要的效果*/
}
.box7{
width:125px;
/*此处与内边距元素居中技术有关
内边距设置会使盒子撑大，则需要再修改一下盒子的高度
*/
height:125px;
background-color: darkred;
/*若想让box8居中显示，正确操作是设置box7内边距*/
/*演示如下*/
padding-top: 25px; /*再修改box7的高度height*/
padding-left: 25px;
}
.box8{
width:100px;
height:100px;
background-color: lightseagreen;
/*若想让box8居中显示，正确操作是设置box7内边距*/
}
/*自动挤压*/
.box9{
width: 150px;
height:150px;
background-color: cadetblue;
margin:150px auto;
}
</style>
<title>外边距特征</title>
</head>
<body>
<h3>外边距同级塌陷</h3>
<!--两个盒子上下边距仅相距50px；因为同级塌陷，仅显示两个盒子中最大盒子的外边距-->
<!--两个盒子同级上下边距塌陷，左右不塌陷-->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<!--两个盒子同级左右边距不塌陷，当盒子1右外边距30px，盒子2做外边距50px，则两盒子相距80px-->
<div class="box3"></div>
<div class="box4"></div>
<hr>
<h3>嵌套传递</h3>
<div class="box5">
<div class="box6"></div>
</div>
<hr>
<div class="box7">
<div class="box8"></div>
</div>
<hr>
<div class="box9">自动挤压</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
内边距元素居中技术，三大办法
第一种 添加内边距，再修改盒子总宽度
第二种 宽度分离技术 在图片盒子***一个外壳 div 利用子级继承父级宽度
第三种 设置box-sizing:border-box,宽度width作用到边框级 然后设置内边距
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="外部样式表路径">-->
<style>
/*去除多余4px*/
.box1 img{
width:100%;
display: block;
}
/*第一种居中办法（添加内边距）*/
.box1{
width:600px;
background-color: saddlebrown;
padding:50px;
}
.box1{
width:480px;
}
/*第二种办法 宽度分离技术*/
.wrap{
width:580px;
}
.box2{
padding: 50px;
background-color: lightcoral;
}
/*去除多余4px*/
.box2 img{
width:100%;
display: block;
}
/*第三种办法 box-sizing*/
.box3{
width:580px;
box-sizing: border-box;
background-color: lightseagreen;
padding:50px;
}
/*去除多余4px*/
.box3 img{
width:100%;
display: block;
}
</style>
<title>内边距元素居中技术</title>
</head>
<body>
<div class="box1">
<img src="../static/images/img01.jpg" alt="广告图">
</div>
<hr>
<div class="wrap" >
<div class="box2">
<img src="../static/images/img01.jpg" alt="广告图">
</div>
</div>
<hr>
<div class="box3">
<img src="../static/images/img01.jpg" alt="广告图">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
浮动的实现原理与消除技术
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="">-->
<title>浮动原理与消除技术</title>
<style>
.box1{
float: left;
width:50px;
height: 50px;
background-color: lightcoral;
}
.box2{
float: right;
width:100px;
height:100px;
background-color: darkred;
}
.box3{
float: left;
width:300px;
height: 300px;
background-color: lawngreen;
}
.box4{
/*清除左边浮动*/
/*clear: left;*/
/*清除右边浮动*/
clear: right;
/*清除全部浮动*/
/*clear: both;*/
width:100%;
height: 50px;
background-color: brown;
}
</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>
<!--<link rel="stylesheet" href="外部样式表路径">-->
<style>
.box1{
width:50px;
height: 50px;
border-radius: 50%;
background-color: black;
text-align: center;
line-height: 50px;
color: red;
position: relative;
left:50px;
top:50px;
}
.box2{
width:50px;
height: 50px;
border-radius: 50%;
background-color: black;
text-align: center;
line-height: 50px;
color: red;
}
.box3{
width:50px;
height: 50px;
border-radius: 50%;
background-color: black;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-100px;
left:100px;
}
.box4{
width:50px;
height: 50px;
border-radius: 50%;
background-color: black;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-50px;
left:50px;
}
.box5{
width:50px;
height: 50px;
border-radius: 50%;
background-color: black;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-100px;
left:100px;
}
.box6{
width:50px;
height: 50px;
border-radius: 50%;
background-color: lightblue;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-250px;
left:0;
}
.box7{
width:50px;
height: 50px;
border-radius: 50%;
background-color: lightblue;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-250px;
left:100px;
}
.box8{
width:50px;
height: 50px;
border-radius: 50%;
background-color: lightblue;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-250px;
left:0;
}
.box9{
width:50px;
height: 50px;
border-radius: 50%;
background-color: lightblue;
text-align: center;
line-height: 50px;
color: red;
position: relative;
top:-400px;
left:50px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
绝对定位实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="外部样式表">-->
<style>
.box{
width:150px;
height: 150px;
position: relative;
border: 1px solid red;
}
.box1{
width:50px;
height: 50px;
background-color: black;
border-radius: 50%;
}
.box2{
width:50px;
height: 50px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 0;
left: 100px;
}
.box3{
width:50px;
height: 50px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 100px;
top:100px;
}
.box4{
width:50px;
height: 50px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 50px;
top:50px;
}
.box5{
width:50px;
height: 50px;
background-color: lawngreen;
border-radius: 50%;
position: absolute;
left: 100px;
top:50px;
}
.box6{
width:50px;
height: 50px;
background-color: lawngreen;
border-radius: 50%;
position: absolute;
left: 50px;
top:100px;
}
.box7{
width:50px;
height: 50px;
background-color: lawngreen;
border-radius: 50%;
}
.box8{
width:50px;
height: 50px;
background-color: lawngreen;
border-radius: 50%;
position: absolute;
top: 0;
left: 50px;
}
.box9{
width:50px;
height: 50px;
background-color: lawngreen;
border-radius: 50%;
}
</style>
<title>绝对位置</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
登陆页面实例（遮罩+绝对定位）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="">-->
<style>
body{
background-image:url(../static/images/php.jpg);
background-size:cover;
}
.login img{
width:325px;
height: 393px;
}
.shade {
position: absolute;
background-color: black;
left:0;
top:0;
width:100%;
height: 100%;
opacity: 0.7;
}
.login{
position: absolute;
left:50%;
top: 50%;
}
.login img{
margin-left:-162.5px;
margin-top: -196.5px;
}
</style>
<title>Title</title>
</head>
<body>
<div class="shade" ></div>
<div class="login">
<img src="../static/images/login.jpg" >
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
固定定位广告位置实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="style1.css">-->
<title>PHP中文网客服浮窗</title>
<style>
.kefu1{
width: 250px;
height:150px;
background-color: lightblue;
position: fixed;
right:0;
bottom: 50%;
}
button{
position: absolute;
top:0;
right: 0;
}
</style>
</head>
<body style="height: 3000px;">
<div class="kefu1" align="center" >
<h2>联系方式</h2>
<h3 >QQ:43528518</h3>
<h3>网址:www.php.cn</h3>
<button onclick="this.parentNode.style.display = 'none'">X</button>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例