<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
background-color: red;
}
.D01{
background-color: orange;
border:5px solid black;
margin: 10px 30px 50px 70px;
}
.D02{
background-color: yellow;
}
.D03{
background-color: green;
}
.D04{
background-color: blue;
}
.D01 span,.D02 span,.D03 span,.D03 span,.D04 span{
background-color: purple;
}
#D01_S01{
background-color: white;
padding: 10px 30px 50px 70px;
margin: 10px 30px 50px 70px;
}
#D01_S02{
width: 200px;
height: 300px;
}
#D01_S03{
margin-top: 100px;
margin-bottom: 200px;
}
#D01_S04{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: 20px;
margin-right: 20px;
}
.D02{
padding: 20px 40px 60px 80px;
border: 10px solid white;
margin-top: 50px;
margin-left: 10px;
margin-bottom: 70px;
margin-right: 300px;
}
.D03{
margin: 20px 50px;
}
.D03 span{
margin: 10px;
}
.D04 span{
margin: auto 50px auto auto;
}
.D05{
background-color: white;
margin-top:50px ;
margin-left: 20px;
}
.D05_D01{
background-color: palegreen;
margin-top: 30px;
margin-left: 20px;
}
#D05_S01{
background-color: purple;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="D01">
<span id="D01_S01">D01_S01</span>
<span id="D01_S02">D01_S02</span>
<span id="D01_S03">D01_S03</span>
<span id="D01_S04">D01_S04</span>
</div>
<div class="D02">
<span id="D02_S01">D02_S01</span>
<span id="D02_S02">D02_S02</span>
<span id="D02_S03">D02_S03</span>
<span id="D02_S04">D02_S04</span>
</div>
<div class="D03">
<span id="D03_S01">D03_S01</span>
<span id="D03_S02">D03_S02</span>
<span id="D03_S03">D03_S03</span>
<span id="D03_S04">D03_S04</span>
</div>
<div class="D04">
<span id="D04_S01">D04_S01</span>
<span id="D04_S02">D04_S02</span>
<span id="D04_S03">D04_S03</span>
<span id="D04_S04">D04_S04</span>
</div>
<div class="D05">
<div class="D05_D01">
<span id="D05_S01">D05_S01</span>
</div>
</div>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.元素(element)或内容,元素可定义其高(height)和宽(width),但对行内元素无效,对当前元素而言;
2.内边距(padding)即嵌套元素外元素对内元素的间距,也就是此元素与其内嵌套元素的间距,对内元素而言;
3.边框(border)即当前元素的边线,可定义其线宽,颜色,类型等,对当前元素而言;
4.外边距(margin)即两同级元素的间距,margin-top和margin-bottom对行内元素无效,对于块元素嵌套,
若此元素有同级元素对同级元素生效,若无,则向上一层,直至最外层;
5.外边距合并,margin-top和margin-bottom则大对小合并(同级元素或嵌套元素),只保留大的边距;
空元素合并,直至遇到非空元素;
6.实际展示效果以及生效方式,以实际运行结果为准,才是最好的布局代码.
