伪元素：
在页面上不存在的元素，但是可以通过css来添加上去
种类：
- :before
- :after
注意：每个元素都有自己的伪元素
使用伪元素来清除浮动：
.clearfix:after
{
content:"";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;/*将元素隐藏起来*/
/*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/
}定位：
解决盒子与盒子之间的层叠问题
position:absolute设置定位
- top:定位以后距离浏览器上边框的距离
- left:定位以后距离浏览器左2边框的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*
{
margin: 0;
padding: 0;
}
.one
{
height: 200px;
width: 200px;
background-color: lightcyan;
}
.two
{
height: 200px;
width: 200px;
background-color:greenyellow;
position: absolute;/*设置定位*/
top:100px ;
left: 100px;
}
div
{
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="two"> </div>
</body>
</html>
详细使用：
- 静态定位：position:static，所有的标准流的元素都是静态定位
- 绝对定位：position:absolute ，配合trbl属性来使用，如果这个元素没有父元素，那么将来trbl是相对与body来定位。如果决定定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相当于body来定位的。如果决定定位的元素有父元素，而且父元素有定位(非static)，那么这个绝对定位的元素偏移是以自己的父元素为基础
- 相对定位：position:relative 配合top left right bottom来使用，如果设置了相对定位并且设置了top right bottom left属性，那么将来盒子会以盒子原本的位置发生偏移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father
{
width: 500px;
border: 10px solid paleturquoise;
overflow: hidden;
}
.son
{
width: 200px;
height: 200px;
background: papayawhip;
float: right;
}
.one
{
width: 500px;
height: 300px;
border: 1px solid deeppink;
}
.clearfix:after
{
content:"";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;/*将元素隐藏起来*/
/*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son">
</div>
</div>
<div class="one"> </div>
</body>
</html>
3069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
