1.内边距：增加padding盒子会被撑开。解决的三种办法：（1）增加padding之后重新设置盒子宽高，是宽高加padding等于原先的宽高。（2）宽度分离；给盒子增加一个***。嵌套盒子只会继承他宽度，然后设置padding（3）box-sizing 利用box-sizing将父级盒子的宽度作用于边框上而不是内容上，将宽度作用于边框上之后，padding就不会被撑开。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx2.css">
<title>内边距padding</title>
</head>
<body>
<div class="box1">
<img src="static/images/girl.jpg" alt="小女孩" width="200px">
</div>
<hr>
<div class="wrap">
<div class="box2">
<img src="static/images/girl.jpg" alt="小女孩" width="200px">
</div>
</div>
<!--<hr> 子盒作用父盒子的内容-->
<hr>
<div class="box3">
<img src="static/images/girl.jpg" alt="小女孩" width="200px">
</div>
</div>
</body>
</html>
.box1 {
width: 300px;
height: 300px;
background-color: yellowgreen;
border: 1px solid black;
padding-left: 50px;
}
.box1 {
padding: 50px;
}
.box1 {
width: 200px;
height: 200px;
}
/*嵌套盒子之间，只有宽度可以继承。*/
.wrap{
width:300px;
}
.box2{
height: 300px;
background-color: blueviolet;
border: 1px solid black;
padding: 50px;
}
.box3 {
width: 300px;
box-sizing: border-box;
/*将父盒子的宽度作用于边框上而不是内容上。*/
background-color: blueviolet;
border: 2px solid black;
padding: 50px;
/*作用到边框上，盒子不会撑开*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.外边距：（1）同级塌陷（2）嵌套传递（3）自动挤压 同级塌陷只是上下塌陷，左右是重叠
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx3.css">
<title>margin外边距</title>
</head>
<body>
<!--1.同级塌陷-->
<!--2嵌套传递-->
<!--3.自动挤压-->
<!--1.同级塌陷-->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<!--2嵌套传递-->
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<!--3.自动挤压-->
<div class="box5"></div>
</body>
</html>
.box1 {
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box1{
margin-bottom: 30px;
}
.box2{
margin-bottom: 30px;
}
.box2{
margin-top: 50px;
}
/*小的会塌陷到大的里面，已大的为准。左右叠加，上下塌陷*/
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box4 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box4 {
margin-top: 0px;
}
.box3 {
padding-top: 30px;
height: 170px;
}
.box5 {
width: 100px;
height: 100px;
background-color: royalblue;
margin-left: auto;
margin-right: auto;
margin: 50px auto;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3.浮动：（1）文档流 html元素默认按照书写的顺序在浏览器中，遵循先从左到右、在从上到下的顺序。（2）布局前提：通常先将元素从文档流中脱离出来，这样才能按照自己的要求布局（3）布局手段：浮动和绝对定位。
清除浮动：clean：both；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx4.css">
<title>浮动</title>
</head>
<body>
<!--1.文档流 html元素默认按照书写的顺序在浏览器中，遵循先从左到右、在从上到下的顺序。-->
<!--2.布局前提：通常先将元素从文档流中脱离出来，这样才能按照自己的要求布局-->
<!--3.布局手段：浮动和绝对定位。-->
<!--浮动的基本原理-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
box1 {
width: 100px;
height: 100px;
background-color: royalblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: rosybrown;
}
/*元素浮动之后就脱离了文档流*/
.box1 {
float: left;
}
.box2 {
float: left;
}
.box3 {
width:200px;
height: 300px;
background-color: tomato;
}
.box3 {
float: right;
}
.box4 {
width:100%;
height: 50px;
background-color: black;
}
.box4 {
clear: left;
clear: right;
}
.box4 {
clear: both;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
4.定位：（1）静态定位: 浏览器默认方式, 即文档流中的位置（2）相对定位：元素并未脱离文档流,只是相对于它原来的位置,做相对移动（3）绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高（4）固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位。相对定位是相对该元素自己原来的位置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx7.css">
<title>php中文网登录页面</title>
</head>
<body>
<div class="shade"></div>
<div class="login" ><img src="static/images/login.jpg" alt=""></div>
</body>
</html>
body {
margin: 0;
background-image: url("../images/php.jpg");
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: 380px;
height: 460px;
background-color: white;
position: absolute;
left: 50%;
top:50%;
margin-left: -190px;
margin-top: -230px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx8.css">
<title>固定定位</title>
<!--相对于body-->
</head>
<!--相对定位是相对该元素自己原来的位置-->
<body>
<div class="ads">
<button >x</button>
<h2>php中文网开课啦</h2>
<h3>招生进行中。。。</h3>
</div>
</body>
</html>
body {
height: 2000px;
}
.ads {
width: 300px;
height: 300px;
background-color: bisque;
position: fixed;
right: 0;
bottom: 0;
}
.ads button {
background-color: red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx5.css">
<title>定位</title>
</head>
<body >
<!--relative相对，未脱离文档流，相对于body-->
<!--<div style="width: 100px;height: 100px;background-color: yellow;position: relative;top: 50px;left: 30px"></div>-->
<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>
</body>
</html>
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background-color: darkviolet;
}
.box4 {
width: 100px;
height: 100px;
background-color: green;
}
.box5 {
width: 100px;
height: 100px;
background-color: palevioletred;
}
.box1 {
position: relative;
left: 100px;
}
.box3 {
position: relative;
left: 100px;
top: -100px;
}
.box4 {
position: relative;
left: 200px;
top: -200px;
}
.box5 {
position: relative;
left: 100px;
top: -200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/xxxx6.css">
<title>定位</title>
</head>
<body >
<!--relative相对，未脱离文档流，相对于body-->
<!--<div style="width: 100px;height: 100px;background-color: yellow;position: relative;top: 50px;left: 30px"></div>-->
<div class="parent">
<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>
</body>
</html>
.parent {
border: 1px dotted black;
width: 300px;
height: 300px;
}
.parent {
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background-color: darkviolet;
}
.box4 {
width: 100px;
height: 100px;
background-color: green;
}
.box5 {
width: 100px;
height: 100px;
background-color: palevioletred;
}
.box1 {
position: absolute;
left: 100px;
}
.box2 {
position: absolute;
top: 100px;
}
.box3 {
position: absolute;
left: 100px;
top: 100px;
}
.box4 {
position: absolute;
left: 200px;
top: 100px;
}
.box5 {
position: absolute;
top: 200px;
left: 100px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例