1、奥运五环
把奥运五环做成一个浮动,总是位于屏幕中央的效果。
2、难点
定位的练习。position :fixed
位于body中间的时候 left:50%;top:50%;
margin-left:-半个身长;
margin-top:-半个身高;
注意:子集基于父级的剧中呢?
3、代码
<div class="wrapper">
<div class="huan1 black position1" ></div>
<div class="huan1 yellow position2"></div>
<div class="huan1 blue position3"></div>
<div class="huan1 green position4"></div>
<div class="huan1 red position5"></div>
</div>
.black{
border-color: black;
}
.position1{
position: absolute;
left: 95px;
top:0px;
z-index: 3;
}
.yellow{
border-color: yellow;
}
.position2{
position: absolute;
left: 45px;
top:50px;
}
.blue{
border-color: blue;
}
.position3{
position: absolute;
left: 0px;
top:0px;
}
.green{
border-color: green;
}
.position4{
position: absolute;
left: 140px;
top:50px;
}
.red{
border-color: red;
}
.position5{
position: absolute;
left: 190px;
top:0px;
}
.huan1{
width: 80px;
height:80px;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.wrapper{
position: fixed;
left: 50%;
top: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
}
4、效果
5、拓展---剧中问题总结
(1)、文字位于盒容器的居中--搜索标签
<div class="sousuo">
<a href="http://www.baidu.com">搜索产品</a>
</div>
div.sousuo{
text-align: center;
font-size: 10px;
font-weight: bold;
height: 30px;
width:85px;
line-height: 30px;
background-color: #f40;
border-width: 1px;
border-radius: 50%;
margin: 50px;
}
a:hover{
color: green;
}
(2)、盒元素基于body的居中--如上面五环的例子
不再写了。
(3)、子集盒元素基于父级盒元素的居中--margin塌陷
bfc解决方案
position:absolute;
display:inline-box;
float:left/right;
overflow:hidden;
- 方法一 百分比+计算:
<div class="box_1">
<div class="box_2">
</div>
</div>
.box_1{
position: fixed;
left: 50%;
top: 50%;
margin-top:-50px;
margin-left: -50px;
height: 100px;
width: 100px;
background-color: green;
}
.box_2{
position: absolute;
left: 25px;
top:25px;
height: 50px;
width: 50px;
background-color: red;
}
方法二:
两次百分比
<div class="box_1">
<div class="box_2">
</div>
</div>
.box_1{
position: fixed;
left: 50%;
top: 50%;
margin-top:-150px;
margin-left: -150px;
height: 300px;
width: 300px;
background-color: green;
}
.box_2{
position: absolute;
left: 50%;
top:50%;
margin-left: -25px;
margin-top: -25px;
height: 50px;
width: 50px;
background-color: red;
}
经过马老师点拨了一下,用两次百分比就搞定了,效果:
方法三:
子集的内容区覆盖父级的宽度,增加父级的padding值
<div class="box_1">
<div class="box_2">
</div>
</div>
.box_1{
width: 100px;
height: 100px;
backgrongd-color:red;
padding: 10px;
border:10px solid black;
margin: 100px;
}
.box_2{
width: 100px;
height: 100px;
background-color: green;
}
方法四:左右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS初识</title>
<link rel="stylesheet" href="CSS初识样式表.css">
</head>
<body>
<!-- 居中总结 -->
<!-- 方法一 -->
<div>这里是内容区,用margin 来实现左右居中</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
div{
width: 60%;
height: 100px;
background-color: red;
/*margin-left margin-right 同时为auto 的时候,作用居中*/
margin-left: auto;
margin-right: auto;
}