position:absolute;
特性:
position:relative;
特性:
position:fixed;
特性:
上述定位的盒子均用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
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论