主流布局的类型:
1.静态布局
2.响应式布局
3.弹性布局
pc站常见的布局:
1.一列布局(静态布局):一列自适应居中
2.两列布局:一列固定宽+一列自适应
3.三列布局(双飞翼布局):中间列自适应宽+左右列的宽固定
一列布局:
1.两个要点:
*页面内容区有一个固定宽度
*页面内容区域在浏览器窗口中自适应居中
2.实现办法:
页面内容区域box{width:自定义宽度;margin:0 auto;}
两列布局:
1.实现办法:
固定列容器{width:固定数值;float:left/right;}
自适应列容器{margin-方向:数值=固定列宽;}
三列布局:
特点:三列布局:中间宽度自适应,两边定宽。
中间列放置主题内容,在浏览器中优先展示渲染
原理:
当子元素处于浮动状态时,设置负margin>=子元素宽度时,子元素会叠到兄弟元素上