1.浮动 float:left /right
2.清除浮动 clear：left/right/both（防止div块覆盖）
3.外边距：margin：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
4.内边距：padding：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
5.边框：border：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
div占面积=（内边距+外边距+边框）*2+div大小
#d1{
width: 200px;
height: 400px;
background: red;
float: left;
}
#d2{
width: 300px;
height: 300px;
background: blue;
}
#d3{
widows: 100%;
height: 100px;
background: green;
clear: both;
}
#d4{
width: 200px;
height: 200px;
background: yellow;
}
ul{
list-style-type: none;
}
li{
float: left;
margin: 0 10px;
}
#big{
width: 800px;
hight: 800px;
background: red;
}
#a1{
width:200px;
height: 200px;
background: yellow;
float: left;
margin: 20px;
padding:40px;
}
#a2{
width:200px;
height: 200px;
background: blue;
float: left;
}
#a3{
width:200px;
height: 200px;
background: pink;
clear: both;
}
#dd{
height: 800px;
width: 800px;
background: blue;
position: absolute;
}
#dd3{
height: 300px;
width: 300px;
background: green;
position: absolute;
top:200px;
left:200px;
z-index: 1
}
#dd4{
height: 300px;
width: 300px;
background: black;
position: absolute;
top: 100px;
left: 100px;
z-index: 2
}
#ddd{
widows: 50px;
height: 50px;
background:#FF00C6;
position: fixed;
top: 500px;
right: 100px;
}
原文：https://www.cnblogs.com/axu-xxx/p/11067652.html