盒子居中 BFC

如何让盒子水平垂直居中:

1、设置margin自动auto 上下左右margin都为0
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

2、
position: absolute;
top: 50%;
left: 50%;
margin-left: -w/2px;/负数,数值是宽度的一半/
margin-top: -h/2px;/负数,数值是高度的一半/
水平居中:margin 0 auto
垂直居中:vertical-align baseline top middle bottom

简述BFC规则,及解决的问题:

BFC 块级格式化上下文,它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
 内部的标签会在垂直方向上一个接一个的放置;
垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin值会发生重叠;
每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠。
计算BFC的高度时,浮动子标签也参与计算。
BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签,反	之亦然。

解决问题:

1、外间距折叠
2、自适应两栏或三栏布局。
3、防止字体环绕
4、清除浮动

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值