Java学习06

1.浮动 float:left /right
2.清除浮动 clear：left/right/both（防止div块覆盖）
3.外边距：margin：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
4.内边距：padding：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
5.边框：border：上边距，右边距，下边距，左边距。（按上右下左的顺序设置）
div占面积=（内边距+外边距+边框）*2+div大小

 margin重叠现象
1.当两个div不浮动时，两个div之间的margin之间的距离是取两者的最大值。
2.两个div浮动时，两个div之间的margin之间的距离是两个margin值之和。
定位布局
1.相对定位（相对本身div）
position: relative(然后才能写right，left，bottom，top意思是距离右边，左边，下边，上边多少多少像素。)
2.绝对定位（相对于第一个带position样式的父元素，如果父元素没有position元素，它会一直往上找直到找到位置。都没有的话就找body标签。）
position: absilute
3.固定定位（相对于你的屏幕定位）

position: fixed
z-index控制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;
}