外边距的三个特征：
同级塌陷
嵌套传递
自动挤压
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: lightcoral;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: burlywood;
margin-top: 20px;
}
/* ********我是分割线******** */
.box3 {
width: 200px;
height: 200px;
background-color: lightgreen;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightskyblue;
/* 设置BOX4小盒子的上边距 */
margin-top: 50px;
}
/* ********我是分割线******** */
.box5 {
width: 200px;
height: 200px;
background-color: lightseagreen;
/* 设置左右边距为自动，也可通过 margin:auto; 设置 */
margin-left: auto;
margin-right: auto;
}
</style>
<title>Margin外边距</title>
</head>
<body>
<!-- 同级塌陷 -->
<!-- 当box设置外下边距为20px，box2设置外上边距为20px 数值会覆盖，不会叠加，及只有20px的边距而不是40px -->
<!-- 当box2的数值大于BOX时，以数值大的为准 -->
<!-- 左右外边距不会塌陷 -->
<div class="box"></div>
<div class="box2"></div>
<hr>
<!-- 嵌套传递 -->
<!-- 设置BOX4小盒子的上边距为50px，发现不是box4小盒子向下移50px，而是box3和box4都向下移了50px。box4的边距数值会传递给父盒子box3 -->
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<!-- 自动挤压 -->
<!-- 我们给box5设置margin-left:auto;,即设置box5左外边距为自动，box5会自动被挤压到最右面。当设置了margin-right:auto;后box5会居中显示。不会根据浏览器的缩放而改变位置 -->
<!-- 简写代码 margin:auto; -->
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
同级塌陷
当box设置外下边距为20px，box2设置外上边距为20px 数值会覆盖，不会叠加，及只有20px的边距而不是40px
当box2的数值大于BOX时，以数值大的为准
左右外边距不会塌陷
嵌套传递
设置BOX4小盒子的上边距为50px，发现不是box4小盒子向下移50px，而是box3和box4都向下移了50px。box4的边距数值会传递给父盒子box3
自动挤压
我们给box5设置margin-left:auto;,即设置box5左外边距为自动，box5会自动被挤压到最右面。当设置了margin-right:auto;后box5会居中显示。不会根据浏览器的缩放而改变位置
简写代码 margin:auto;
内边距padding
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
/* 第一种方式 */
.box {
width: 200px;
height: 200px;
background-color: burlywood;
padding: 50px;
}
img {
width: 100px;
}
.box {
width: 100px;
height: 100px;
}
/* 第二种方式，宽度分离 */
/* 这是利用了嵌套盒子之间，只有宽度可以继承的特征 */
.main {
width: 200px;
height: 200px;
}
.box2 {
background-color: coral;
padding: 50px;
}
/* box-sizing */
.box3 {
width: 200px;
background-color: lightpink;
/* 将父盒子的宽度作用到边框上，而不是内容上 */
box-sizing: border-box;
padding: 50px;
}
</style>
<title>CSSmargin外边距和padding内边距</title>
</head>
<body>
<!-- padding内边距 -->
<!-- 设置一个大盒子，里面嵌套一个小盒子。使小盒子垂直水平居中 -->
<!-- 第一种方式 -->
<div class="box">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562488375059&di=6d10ce831a0a8caf20b018383a4baad1&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201503%2F28%2F20150328195759_zFcCk.jpeg" alt="小姐姐" srcset="">
</div>
<hr>
<!-- 第二种方式，宽度分离 -->
<div class="main">
<div class="box2">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=829044612,3699393036&fm=26&gp=0.jpg" alt="小姐姐" srcset="">
</div>
</div>
<hr>
<!-- box-sizing -->
<div class="box3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1562478553&di=9034c0c380046404ca5640f47a4ed210&src=http://b-ssl.duitang.com/uploads/item/201511/04/20151104193513_QuYmc.jpeg" alt="小姐姐" srcset="">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
当我们设置子盒子的内边距。父盒子会被撑大
下面有三个解决方案
第一种方式
设置完子盒子的内边距后，重新给父盒子设置一下宽度和高度
第二种方式，宽度分离
这是利用了嵌套盒子之间，只有宽度可以继承的特征
在盒子外面设置一个大盒子，来控制内部盒子的宽度
第三种方式，box-sizing
通过设置box-sizing属性
将父盒子的宽度作用到边框上，而不是内容上
相对定位和绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
/* 相对定位 */
.box {
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* 设置圆角 */
border-radius: 50px;
position: relative;
left: 100px;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
position: relative;
left: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50px;
position: relative;
top: -100px;
}
.box3 {
width: 100px;
height: 100px;
background-color: rosybrown;
border-radius: 50px;
position: relative;
left: 200px;
top: -200px;
}
.box4 {
width: 100px;
height: 100px;
background-color:green;
border-radius: 50px;
position: relative;
left: 100px;
top: -200px;
}
.box5 {
width: 100px;
height: 100px;
background-color: goldenrod;
border-radius: 50px;
position: relative;
bottom: 230px;
left: 30px;
}
.box6 {
width: 100px;
height: 100px;
background-color: orchid;
border-radius: 50px;
position: relative;
left: 170px;
bottom: 330px;
}
/* 绝对定位 */
.main {
width: 300px;
height: 400px;
border: 1px dotted lightslategray;
/* 绝对定位, 它是脱离了文档流的, 所有必须要有一个定位父级做为参照物 */
/* 也可以使用绝对定位,但推荐使用相对定位,以防止一些兼容性问题 */
/*position: absolute;*/
position: relative;
left: 200px;
}
.box7 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* 设置圆角 */
border-radius: 50px;
position:absolute;
left: 100px;
}
.box8 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
position:absolute;
top: 100px;
}
.box9 {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50px;
position:absolute;
left: 200px;
top: 100px;
}
.box10 {
width: 100px;
height: 100px;
background-color: rosybrown;
border-radius: 50px;
position:absolute;
left: 100px;
top: 100px;
}
.box11 {
width: 100px;
height: 100px;
background-color:green;
border-radius: 50px;
position: absolute;
left: 100px;
top: 200px;
}
.box12 {
width: 100px;
height: 100px;
background-color: goldenrod;
border-radius: 50px;
position: absolute;
top: 270px;
left: 30px;
}
.box13 {
width: 100px;
height: 100px;
background-color: orchid;
border-radius: 50px;
position: absolute;
top: 270px;
left: 170px;
}
</style>
<title>Position:Relative 相对定位</title>
</head>
<body>
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!-- 使用相对定位做一个七彩小人-->
<!-- 相对定位, 是以元素在文档流中的原始位置为参照物进行定位的 -->
<h1>相对定位</h1>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<hr>
<h1>绝对定位</h1>
<!-- 使用绝对定位做一个七彩小人-->
<!-- 绝对定位, 它是脱离了文档流的, 所有必须要有一个定位父级做为参照物 -->
<!-- 默认以整个窗口进行绝对定位, 定位父级是<body> -->
<div class="main">
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
<div class="box13"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
定位分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
相对定位, 是以元素在文档流中的原始位置为参照物进行定位的
绝对定位, 它是脱离了文档流的, 所有必须要有一个定位父级做为参照物
默认以整个窗口进行绝对定位, 定位父级是<body>
遮罩+绝对定位和固定定位小案例
遮罩+绝对定位小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
body {
margin: 0;
background-image: url(images/php.png);
background-size: cover;
background-repeat: no-repeat;
}
.login img {
width: 360px;
height: 460px;
}
/* 设置遮罩 */
.shades {
position:absolute;
left: 0;
right: 0;
/* 设置遮罩铺满屏幕 */
width: 100%;
height: 100%;
/* 设置遮罩颜色 */
background-color: black;
opacity: 0.6;
}
/* 定位登录框位置垂直水平居中 */
.login {
position: absolute;
left: 50%;
top: 50%;
margin: -230px 0 0 -180px;
}
</style>
<title>绝对定位 遮罩（shade）</title>
</head>
<body>
<div class="shades"></div>
<div class="login"><img src="./images/login.png" alt="" srcset=""></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
固定定位小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.box {
width: 300px;
height: 200px;
background-color: lightgray;
/* 适用固定定位 定位弹窗位置为右下角 */
position:fixed;
right: 0;
bottom: 0;
padding: 10px;
}
button {
float: right;
}
</style>
<title>绝对定位之弹窗广告</title>
</head>
<body>
<div class="box">
<button onclick="this.parentNode.style.display = 'none'">x</button>
<p style="padding: 10px;">你好PHP中文网！</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
