收藏
批改状态：合格
老师批语：浮动与定位是布局最常用的工具
一、外边距的三个特征：
1.同级塌陷：两个盒子之间的上下外边距会发生塌陷，两盒子外边距之和等于两盒子中设置的最大外边距的值。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>外边距的同级塌陷</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color:red;
margin-bottom: 10px;
}
.box2{
width: 100px;
height: 100px;
background-color:green;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.嵌套传递：子元素添加外边距会添加到父元素上。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>外边距的嵌套传递</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color:red;
}
.box2{
width: 100px;
height: 100px;
background-color:green;
margin-top:50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.自动挤压：当左边距为auto时，左边距的值会尽可能的大，将盒子挤到最右端；此时，当右边距也为auto时，同样会将盒子挤到最左端，两种对抗力量互不相让，实现盒子的自动居中。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>外边距的自动挤压</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color:red;
margin:auto;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、内边距居中的三种解决方式
1.方法一：重新设置原盒子的宽度
父元素设置padding后，盒子会被撑开，这时将被撑开的宽度与高度减掉，显示效果就会把子元素居中
计算公式：设置padding左右的值=（父元素宽度-子元素宽度）/2
计算公式：重新设置的盒子的宽度=设置padding左右的值*2
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>解决内边距居中问题的三个方法</title>
<style type="text/css">
.box1{
width:300px;
border:1px dashed #000;
padding: 50px;
}
img{
width: 200px;
height: 200px;
}
.box1{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="box1">
<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.方法二：宽度分离
给div再套一个父级元素，由于子元素会继承父元素的宽度，因此盒子不会被撑开
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>解决内边距居中问题的三个方法</title>
<style type="text/css">
.box{
width:300px;
}
.box1{
border:1px dashed #000;
padding: 50px;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.方法三：box-sizing:border-box;将宽度作用于边框级，内边距不会撑开盒子。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>解决内边距居中问题的三个方法</title>
<style type="text/css">
.box1{
width: 300px;
box-sizing:border-box;
border:1px dashed #000;
padding:50px;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、浮动的实现与清除
1.给元素添加浮动后，元素会脱离文档流，进入浮动流按先来后到的顺序重新排布。float：left; float：right；
2.清除浮动clear：left；(清除左浮动的影响)。clear：right；(清除右浮动的影响)。clear:both;清除浮动影响。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>浮动的实现与清除</title>
<style type="text/css">
.box1{
width: 100px;
height: 200px;
float: left;
background-color: red;
}
.box2{
width: 200px;
height: 100px;
float: right;
background-color: green;
}
.box3{
width: 100%;
height: 100px;
clear:both;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、定位
1.相对定位：position: relative;未脱离文档流，相对于元素本身的位置做偏移。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<style type="text/css">
.box1{
width:20px;
height:20px;
color:#000;
background-color: #46ff00;
border-radius: 50%;
position:relative;
margin-top:0;
margin-left:280px;
}
.box2{
width:30px;
height:30px;
color:#000;
background-color: #ecfe01;
border-radius: 50%;
position:relative;
margin-top:25px;
margin-left:210px;
}
.box3{
width:40px;
height:40px;
color:#000;
background-color: #b21d53;
border-radius: 50%;
position:relative;
margin-top:25px;
margin-left:140px;
}
.box4{
width:50px;
height:50px;
color:#000;
background-color: #1ae7e7;
border-radius: 50%;
position:relative;
margin-top:25px;
margin-left:70px;
}
.box5{
width:60px;
height:60px;
color:#000;
background-color: #0e01f5;
border-radius: 50%;
position:relative;
margin-top:25px;
margin-left:0px;
}
</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>点击 "运行实例" 按钮查看在线实例
2.绝对定位：position: absolute;脱离文档流，以父元素的位置为参照做偏移,不论元素之前是什么类型,全部转为块元素,支持宽高。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
position:relative;
border:1px dashed red;
}
.box1{
width:20px;
height:20px;
color:#000;
background-color: #46ff00;
border-radius: 50%;
position:absolute;
}
.box2{
width:30px;
height:30px;
color:#000;
background-color: #ecfe01;
border-radius: 50%;
position:absolute;
margin-top:45px;
margin-left:45px;
}
.box3{
width:40px;
height:40px;
color:#000;
background-color: #b21d53;
border-radius: 50%;
position:absolute;
margin-top:100px;
margin-left:100px;
}
.box4{
width:50px;
height:50px;
color:#000;
background-color: #1ae7e7;
border-radius: 50%;
position:absolute;
margin-top:165px;
margin-left:165px;
}
.box5{
width:60px;
height:60px;
color:#000;
background-color: #0e01f5;
border-radius: 50%;
position:absolute;
margin-top:240px;
margin-left:240px;
}
</style>
</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>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.绝对定位小案例
【1】用绝对定位设置遮罩，使其脱离文档流不随窗口变化而变化，背景色为黑色，宽高100%，不透明度70%。
【2】登录框用绝对定位也是相同的道理，top、left各50%，margin-top减去二分之一的高度，margin-left减去二分之一的宽度，使登录框居中显示。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位小案例</title>
<style>
body{
background-color:#00a5e0;
color: #fff;
}
.box1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.4;
}
.box2{
width: 380px;
height: 380px;
border-radius:10px;
position: absolute;
background-color: #fff;
top:50%;
left:50%;
margin-top: -190px;
margin-left: -190px;
}
.box3{
padding: 30px;
color:#373737;
}
input{
width: 220px;
height: 40px;
border-radius: 4px;
border:1px solid #ccc;
font-size: 14px;
padding:0 10px;
}
button{
width: 320px;
height: 40px;
background-color: #00a5e0;
color:#fff;
font-size: 16px;
font-family:'微软雅黑';
border-radius: 4px;
border:none;
}
button:hover{
background-color:#2d7bdd;
}
p{
margin-top:30px;
}
</style>
</head>
<body>
<h1>php中文网</h1>
<div class="box1"></div>
<div class="box2">
<div class="box3">
<h2>登录</h2>
<hr>
<p>
<label for="username">用户名：</label>
<input type="username" name="username" id="username" placeholder="请输入3-8字符用户名" autofocus="">
</p>
<p>
<label for="password">密<span> </span>码：</label>
<input type="password" name="password" id="password" placeholder="请输入6-12位数字、字母组成的密码" autofocus="">
</p>
<p>
<button type="submit">登录</button>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.固定定位：position:fixed;始终以浏览器窗口为父元素进行定位
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
background-color:#00a5e0;
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 300px;
background-color:#fff;
border-radius: 6px;
box-shadow: 2px 2px 5px #ccc;
position:fixed;
padding: 15px;
bottom:10px;
right: 10px;
}
button{
position: relative;
top:-286px;
left:186px;
}
</style>
</head>
<body>
<div class="box">
<h2>广告</h2>
<p>我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告，我是广告</p>
<button>x</button>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
