Java学习06

Posted 2022-02-01 axu-xxx

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;