两栏布局
两栏布局,两个div盒子,左边固定宽度,右边自适应
左边盒子设置左浮动,右边盒子加overflow:hidden,然后清除左侧的浮动即可
圣杯双飞翼的特点
两侧宽度固定,中间宽度自适应
中间部分在DOM结构上优先,以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的
<div >
外层 标签
圣杯布局
首先构建DOM结构,大的div里面三个小的div分别是中左右三部分,其中中间部分定义在最前面,中间部分在DOM结构上优先,以便先行渲染.
设置左右div固定宽度,中间部分宽度100%,中间部分设置padding-left或者-right左右的宽度即可,给父元素设置左浮动,因为中间区域宽度100%,所以会单独占一行,左右分别在下面,给左边的元素的margin-left为-100%,右边的设置margin-right-它自身的宽度即可,对left和right添加position:relative就实现了圣杯布局
双飞翼布局
双飞翼布局跟圣杯布局基本相同,双飞翼布局不仅能满足main处于优先加载的地位,也能更好解决圣杯布局的错乱问题,且css代码简单,缺点是增加了一个标签
实现:只需要给中间内容区域多套一个盒子,并且设置它的左右margin值为左右侧边栏的宽度,因为外部盒子进行了浮动,中间区域嵌套里面的盒子由于没有设置浮动,所以其宽度默认为外层盒子的100%宽度,通过对其设置
margin-left
和margin-right
为左右两列预留出了空间,然后再将左边的元素的margin-left为-100%,右边的设置margin-right-它自身的宽度即可实现双飞翼布局