泡泡同学的微博跟新了,赶紧来看,css布局新内容,bfc和ifc.希望对你有帮助
css布局
一、盒子定位postion
可选值:static (默认)
absolute(绝对定位) 按照靠最近的定过位的父元素定位,如果父元素没有定位按body定位
relative(相对定位) 相对于元素本身定位
fixed(固定定位) 相对于浏览器窗口定位
注意:1、相对定位元素原来的位置被保留
2、绝对定位元素原来的位置被清空 (要移动)
3、固定定位让元素原来位置被清空 (不移动)
二、设置内容溢出部分
1、overflow
可选值: visible 不会被修剪
hidden 会修剪,被修剪的部分不可见
scrou 滚动条显示内容,显示内容会被修剪
2、 对元素形状进行裁剪
clip (绝对定位的元素才能裁剪)
比如:rect(20px 100px 30px 100px)
设置顺序:上,右 下 左
上和左设置的数字表示:所有裁剪区域的高度
右和下设置的数字表示:所有显示的区域的大小
3、z-index
设置重叠元素的显示顺序
哪个的值越大,就显示哪个
三、bfc (块级格式化上下文 )
规则:
1、bfc环境中的所有元素按垂直方向摆放(一个接一个)
2、相琳盒子在垂直方向上的margin值会重叠
3、内部盒子会以bfc的左边(右边)线接触,浮动也是这样
4、bfc区域不会与浮动盒子重叠
5.bfc环境中的子元素以外界分离,不会影响到外面元素,而外面元素也不会影响到bfc里面
6、bfc中浮动元素会参与计算
四、bfc触发方式
float:值不为none
position:absolute fixed
display:inline-block
overflow:不为visible
五、IFC(行级格式化上下文)
规则:
1、ifc中的元素会在一行从左到右排列
2、在一行上的所有元素会该区域形成一个行框
3、行框的宽度为包含框的宽度,高度为行框中最元素的高度
4、浮动的元素不会在行框中,并且浮动元素会压缩杭框的宽度
5、行框的宽度容纳下子元素时,子元素会换到下一行显示,并会产生新的的行框
6、行框内的元素遵循 text-align 和 vertical-align