常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)
1. 两栏布局
左边左浮动 , 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响
2.圣杯布局
两侧固定宽度,中间自定义
比如一个大盒子里面嵌套了三个小盒子,分别为左边右边和中间
- 先给大盒子一个paddind:0 200px
- 左/右边分别为200px
- 中间100%宽度
- 里面的小盒子都浮动 (这个时候中间的盒子撑满了一行,把两个小盒子撑到下面)
- 给左边小盒子 margin-left : -100% (这个时候左边小盒子到中间区域最左边) 然后给一个相对定位设置left为-200px
- 给右边小盒子 margin-left : -200px (这个时候右边小盒子到中间区域最右边) 然后给一个相对定位设置left为200px
3、双飞翼布局
同圣杯布局
是用margin