浮动的概念
浮动的代码
float:left;//左浮动
float:right;//右浮动
浮动的特点
- 浮动的元素会脱离标准流(标准流就是浏览器默认摆放盒子的标准)
- 浮动后的元素会覆盖在标准流之上
- 浮动后的元素会改变显示方式(会变成行内块),可以设置宽高
浮动对页面的影响
如果父盒子中有一个子盒子,父盒子没有设置高度,子盒子浮动,那么父盒子不能被子盒子撑开,即父盒子高度为0,这时下面的盒子会占位。
解决上述问题的方式–清除浮动
方法一:额外标签法(一般不推荐,会额外增加页面标签)
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响。
又分为外部标签法和内部标签法
外部标签法:
<style>
.clearfix {
clear:both;
}
</style>
<div class="father">
<div class="son"></div>
</div>
<div class="clearfix"></div>
//缺点是父盒子高度依然为0
内部标签法:
<style>
.clearfix {
clear:both;
}
</style>
<div class="father">
<div class="son"></div>
<div class="clearfix"></div>
</div>
方法二:overflow:hidden(一般也不推荐,元素超出部分会被隐藏)
先找到浮动盒子的父元素,在父元素中添加一个属性overflow:hidden
<style>
.fateher {
overflow:hidden;
}
</style>
<div class="father">
<div class="son"></div>
</div>
方法二:使用伪元素(开发者的首选)
伪元素:在页面中不存在的元素,可以通过css添加上去,每一个元素都有自己的伪元素
分类:
:before //在…之前添加
:after //在…之后添加
<style>
.clearfix:after,.clearfix:before {
content:"";
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix {
zoom:1; /* 兼容ie6*/
}
</style>
<div class="father clearfix">
<div class="son"></div>
</div>
后面我还会说到使用伪元素的好处,以及伪元素的妙用等。
定位的概念
定位的分类:静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed)
静态定位:position:static所有的标准流默认都是静态定位
相对定位:position:relative 相对于自身定位 定位后的元素不脱离标准流 在页面上依然占据位置
绝对定位:position:absolute 定位后元素脱离标准流 在页面上不占位置
1. 如设置绝对定位的元素没有父元素,就相对于body定位
2. 如果有父元素,但是父元素没有定位,则还是相对于body定位
3. 如果有父元素,而且父元素有定位(非static),那么这个元素就相对于父元素进行定位
固定定位:position:fixed
不管页面多大,永远相对于浏览器边框定位 定位后元素脱离标准流 在页面上不占位置
层级的概念
- 只有定位的元素才有层级 而定位中只有这三个有层级:relative absolute fixed
- 层级的取值范围:0–无穷大(可以取负数但是最好不要用负数 一般0-9999)
- 浮动和标准流的元素都没有层级 浮动是解决块级元素在同一行显示的问题
- 设置层级通过z-index属性 层级越高的显示越靠前