1、整体布局
大部分的布局都是由三部分组成，header、body、footer。
代码布局：写三个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="pg-header"></div> #header
<div class="pg-body"></div> #body
<div class="pg-footer"></div> #footer
</body>
</html>
2、默认margin
默认情况下body和document之间是有margin的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
40px;
height:40px;
border:2px dashed red;
margin-top:20px;
padding-left:10px;
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
}
</style>
</head>
<body>
<div>
aaa
</div>
</body>
</html>
以上代码我并没有设置div的maring，但是它不是定格，你会发现它在上面和左边都有间距，这就是默认距离。
一般情况下，我们需要去掉这个默认距离：
body{
margin:0;
}
3、div居中
一般用户制作header时，比如淘宝：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
1000px;
background-color:red;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div id="div1">
我是div内容。
</div>
</body>
</html>
效果图：
4、块级标签中内容居中
实现：line-height行高设置成div的高度。
<div style="height:50px;line-height:50px">asdfasdf</div>
效果图：
5、background-position
应用场景：这种图片都是一块打的图片，通过设置position可以获取自己想要的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
1000px;
height:100px;
background-color:red;
margin:0 auto;
text-align:center;
background-image:
url(//misc.360buyimg.com/mtd/pc/index_2017/2.0.1/static/images/ico_service@2x.png);
background-position: 30px 171px;
}
</style>
</head>
<body>
<div id="div1">
我是div内容。
</div>
</body>
</html>
效果图：
随着调整background-position参数，背景图片会移动。
6、内联标签转块标签
块级标签：div,p,h1-h6,ul,li,dl,dt,dd
内联标签：a，span,strong,u,em
<span>我是span</span>
#sp{
background-color:green;
display:inline-block;
200px;
}
默认情况下span设定宽度不会生效，但是设定为inline-block后，可以设定宽度。
7、z-index
z-index标签主要用于场景为模态框，我们使用模态框时，会有几层div，这时就可以通过z-index设定哪个div位于上面，哪个div位于下面。