CSS 定位和浮动
程序员文章站
2022-06-28 19:01:37
定位绝对定位position:absolute;特性:绝对定位相对于有定位的父盒子进行定位父亲或更上一级必须有定位,如果没有,则相对于浏览器定位绝对定位脱标,即会浮起来不占有原来的位置,所以通常和相对定位配合使用,简称子绝父相相对定位position:relative;特性:相对定位相对于原来的位置进行定位相对定位不脱标相对定位与绝对定位配合使用固定定位position:fixed;特性:固定定位常用于悬浮的按钮或者导航偏移上述定位的盒子均用...
定位
绝对定位
position:absolute;
特性:
- 绝对定位相对于有定位的父盒子进行定位
- 父亲或更上一级必须有定位,如果没有,则相对于浏览器定位
- 绝对定位脱标,即会浮起来不占有原来的位置,所以通常和相对定位配合使用,简称子绝父相
相对定位
position:relative;
特性:
- 相对定位相对于原来的位置进行定位
- 相对定位不脱标
- 相对定位与绝对定位配合使用
固定定位
position:fixed;
特性:
- 固定定位常用于悬浮的按钮或者导航
偏移
上述定位的盒子均用top,bottom,left,right进行定位
- top:顶部偏移量,定义元素先对于父元素上边线的距离
- bottom:底部偏移量,定义元素先对于父元素下边线的距离
- left:左部偏移量,定义元素先对于父元素左边线的距离
- right:右部偏移量,定义元素先对于父元素右边线的距离
盒子的层级顺序
使用z-index, 最上层的z-index 最高,相当于楼层俯视图,z-index代表楼层,z-index=0;z-index=10;
浮动
float:left/right;
特性:
- 浮动之后脱标
- 浮动之后,其他元素将围绕着他,而绝对定位却会直接盖在其他元素上方。
- 浮动盒子一行内显示(行内块),盒子沿上沿对齐
- 浮动盒子具有行内块元素的特性,即可以一行显示多个盒子,可以调整宽高,默认和父盒子一样宽
- 浮动只会影响后面的标准流,不会影响前面的标准流。
清除浮动:
所谓清除浮动,实际上是让父亲盒子即使不设高度,仍然占有位置,不会有下方的标准流上移占据浮动盒子的位置,父盒子高度通过子盒子撑开来决定。TIPS:如果父亲有高度就不用清除浮动。
清除浮动的方法:
额外标签法(隔墙法):W3C推荐方法,父亲盒子内尾部插入块级元素(但是这种方法添加了无用的标签,使得结构不清晰,不常用)
<div style:"clear:both"></div>
父亲盒子CSS添加overflow:
overflow:hidden/scroll/auto;
注意:这种方法无法显示溢出的部分
:after 伪元素法: 父元素应用clearFix样式即可清除浮动 (百度,淘宝)
.clearFix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*
照顾低版本浏览器:IE6,IE7
*/
.clearFix {
*zoom:1;
}
双伪元素法:xiaomi
.clearFix :before
.clearFix :after {
content:"";
display:table;
}
.clearFix:after {
clear:both;
}
/*
照顾低版本浏览器
*/
.clearFix {
*zoom:1;
}
使用方法:
浮动与标准流搭配使用:标准流决定上下排列,浮动来进行同一行排列。
父盒子一般不设置固定的高度(如淘宝商城的商品,高度随商品数目而定,通过子盒子来撑开),而只设置宽
定位和浮动总结
定位多数用于一个盒子内的元素的位置排布,如一个走马灯上的各种元素的排布,记住子绝父相。
浮动多数用于一行内子盒子的排布,与标准流搭配使用,搭配方法如上图所示。
定位层级>浮动层级>标准流层级
本文地址:https://blog.csdn.net/weixin_43288153/article/details/107366155