浮动，定位，与透明
Posted hellosiyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动，定位，与透明相关的知识，希望对你有一定的参考价值。
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);
}
以上是关于浮动，定位，与透明的主要内容，如果未能解决你的问题，请参考以下文章
前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度