CSS面试考点之两栏布局和三栏布局
1、两栏布局
两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满。
实现思路
:
1)使用 float 左浮左边栏;
2)右边模块使用 margin-left 撑出内容块做内容展示;
3)为父级元素添加BFC,防止下方元素飞到上方内容。
实现原理:a、两边固定宽度,中间宽度自适应;
b、利用中间元素的margin值控制两边的间距;
c、宽度小于左右部分宽度之和时,右侧部分会被挤下去。
此实现方式存在缺陷:
a、主体内容是最后加载的。
b、右边在主体内容之前,如果是响应式设计,不能简单的换行展示
2)两边使用 absolute,中间使用 margin
基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序