1、触发BFC(块级格式上下文) 的条件。对BFC IFC GFC FFC的理解.(GFC FFC二者是css3里提出的)
1、overflow不为visibility
2、position为static,absolute
3、float不为none
4、display为table-cell table-caption inline-block 中的一个
BFC:块级格式化上下文。
是什么:即页面的一块隔离渲染区域,里边的元素布局不影响外界的布局。
用处:多栏布局。块级元素浮动,里边的元素即在相对隔离的环境布局。
IFC:内联格式化上下文
触发:inline-block
GFC:网格布局格式化上下文
FFC:自适应格式化上下文
2、页面布局的方式。p71
1、双飞翼
经典的三列布局。中间自适应,两边定宽。
2、多栏
3、弹性布局
实现浏览器和屏幕大小发生变化时保持元素的相对位置和大小不变。
4、瀑布流布局
滑到页面底部接着下拉加载。
5、流布局
每列按百分比控制。
6、固定布局
每列按具体的像素规定。
7、响应式布局
适应多终端的布局。
3、如何解决多个元素重叠问题。
z-index。默认为auto,即层叠上下文级别为0。可设为正或负,整数越大,越靠上。适用于定位position不为static的元素。
4、position的理解。
static 默认值。正常定位,出现在正常流中。
absolute 绝对定位,相对于除了static定位外的离自身最近的第一个父元素进行定位
relative 相对定位,相对于正常流
fixed 绝对定位,相对于浏览器窗口
以下三种为css3新增元素:
center:和absolute一致,也是绝对定位,相对于除了static定位以外的离自身最近的第一个父元素进行定位。但定位是相对于父元素的中心。盒子在其包含容器的垂直正中位置
sticky:relative和fixed的合体。在屏幕中时正常流类似于relative,滑动到屏幕外时类似于fixed
page:和absolute一致,元素在分页媒体或区域块内,元素的包含块始终是初始包含块。
absolute和fixed的共同点和不同点:
共同点:1、二者都脱离正常流,不占据空间。
2、二者默认覆盖非定位元素。
3、改变行内元素,display被设为inline-block。
不同点:1、二者位置相对的对象不同。absolute相对于static外第一个离得最近的父元素,fixed始终相对于根元素。
2、滚动页面,fixed距离浏览器窗口位置始终不变。