码迷,mamicode.com
首页 > 编程语言 > 详细

Java学习06

时间:2019-06-22 10:52:15      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:bottom   position   margin   学习   ott   之间   防止   标签   bsp   

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;
}

Java学习06

标签:bottom   position   margin   学习   ott   之间   防止   标签   bsp   

原文地址:https://www.cnblogs.com/axu-xxx/p/11067652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!