今天学习了块元素和内联元素之间的转换，绝对定位和相对定位的应用，做作业时，暂时没有遇到难解决的问题，在于作业难度相对小，还需要多加练习。
<head>
<meta charset="utf-8">
<title>内联元素h和块元素的转换</title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
margin: auto;
padding: 50px;
/*将块元素转换为内联元素*/
display: inline;
}
#s1{
width: 100px;
height: 100px;
background-color: blue;
margin:50px 20px;
padding:10px 30px;
/*将内联元素转换为块元素*/
display: block;
}
#d2{
width: 200px;
height: 200px;
background-color: yellow;
/*将元素隐藏*/
}
</style>
</head>
绝对定位和相对定位
<style>
#d{
width: 200px;
height: 200px;
background-color: red;
}
#d1{
width: 50px;
height: 50px;
background-color: yellow;
/*相对定位:相对于元素本身应该在的位置移动*/
position: relative;
left: 20px;
bottom: 20px;
}
#d2{
width: 50px;
height: 50px;
background-color:pink;
}
#dd{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
#dd1{
width: 50px;
height: 50px;
background-color: green;
/*绝对定位:距离父类（有position样式的父类）。。。。body*/
position: absolute;
left: 20px;
top: 50px;
z-index: 100;
}
#dd2{
width: 50px;
height: 50px;
background-color:orange;
position: absolute;
left: 30px;
top: 60px;
z-index: 50
}
</style>