CSS属性、BFC、IFC

定位属性

1.clear 规定哪一侧不允许元素浮动
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧

2.clip 剪裁绝对定位的元素
clip:rect(上top,右right,bottom下,left左)
左和上:裁掉多少写多少
右和下:显示多少写多少

3.display 规定元素应该生成的框的类型
none 此元素不会被显示
block 此元素将显示为块级元素,此元素前后会带有换行符
inline 默认。此元素会被显示为内联元素,元素前后没有换行符
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示
run-in 此元素会根据上下文作为块级元素或内联元素显示
table 此元素会作为块级表格来显示(类似 table),表格前后带有换行符
inline-table 此元素会作为内联表格来显示(类似

BFC(Block formatting context)

直译为”块级格式化上下文”。

BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
4.BFC的区域不会与float box重叠
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
6.计算BFC的高度时,浮动元素也参与计算

BFC触发方式:
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible

IFC(Inline Formatting Contexts)

直译为”内联格式化上下文”,IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。

垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

规则:
1.ifc中的元素会在一行中从左到右排列
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度,高度为行框中最高元素的高度
4.浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度
5.行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框
6.行框的元素内遵循text-align和vertical-align

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值