【第64天】浮动，定位
2019-09-28 本文已影响0人
36140820cbfd
1 浮动的副作用
清除浮动
html代码
代码块
<body>
<div class="clearfix">
<div class="c c1"></div>
<div class="c c2"></div>
</div>
<div class="c3"></div>
</body>
css代码
代码块
body {
margin: 0;
}
.c {
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
float: left;
}
.c2 {
background-color: green;
float: right;
}
.c3 {
height: 200px;
width: 100%;
background-color: blue;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
2绝对定位，相对定位，固定定位
定位
html
代码块
<body>
<div class="c c1"></div>
<div class="c c2">
<div class="cc "></div>
</div>
<div class="c c3"></div>
<div class="ccc">top</div>
</body>
css
代码块
body {
margin: 0;
}
.c {
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
}
.c2 {
background-color: green;
/*position: relative;*/
/*left: 100px*/
}
.c3 {
background-color: blue;
}
.cc {
height: 200px;
width: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px
}
.ccc {
height: 50px;
width: 50px;
background-color: lawngreen;
color: white;
position: fixed;
right: 50px;
bottom: 50px;
3 利用z-index显示遮罩层和浮层
html代码
代码块
<body>
<div class="cover"></div>
<div class="yingying"></div>
</body>
css
代码块
<!--遮罩层-->
.cover {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,23,128,0.1);
z-index: 999;
}
<!--显示层-->
.yingying {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
width: 400px;
height: 200px;
background-color: white;
z-index: 1000;
}
4 透明度的例子
透明度
html
代码块
<body>
<div class="c1">c1</div>
<hr>
<div class="c2">c2</div>
</body>
css
代码块
.c1 {
height: 200px;
width: 200px;
background-color: red;
opacity: 0.4; <!--针对的是整体，包括文字-->
}
.c2 {
height: 200px;
width: 200px;
background-color: rgba(255,0,0,0.4);
}
别跑，点个赞再走
