一、圣杯布局
解释: 是两边宽度固定,中间自适应的三栏布局。其中,中间栏放到文档流前面,保证先行渲染。
写作方法:
1、父级盒子设置高度和宽度(100%),为了留出中间位置,添加左右padding值(padding左右值即为左右栏宽度),为了取消补白区域影响,添加box-sizing;border-box
2、父级里三栏的位置,中间栏在前,然后左右
3、中间栏宽度100%
4、左侧宽度和padding-left一致,右侧和padding-right一致
5、使左侧、右侧内容在一行内显示,为他们添加定位(父相子绝)
下面上代码:
1、css代码
2、html代码:
这是展示效果:
二、双飞翼布局
解释:是两边固定,中间自适应的三栏布局。其中,中间栏放到文档流前面,保证先行渲染。
写作方法:
1、父级盒子设置高度和宽度
2、父级里三栏的位置,中间栏在前,然后左右
3、中间盒子宽度width:100% 且独占一行
4、三个盒子设置float:left;
5、使用margin-left属性将左右两边的盒子拉回与中间盒子同一行left{margin-left:-100%};向左走一个父级盒子的宽度{margin-left:负的自身宽度}
6、中间主盒子里面的内容盒子设置左右margin,避免被遮挡内容
下面上代码:
1、css代码
2、html代码:
这是展示效果(用了下测试代码):
三、双飞翼布局和圣杯布局的区别
1、相同点
(1)两侧宽度固定,中间宽度自适应
(2)中间部分在结构上优先,以便先行渲染
(3)允许三列中的任意一列成为最高列
(4)只需要使用一个额外的div标签
2、不同点
(1)圣杯布局
借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度,就像同一个杯子,非主要元素器只是占据了全部容器的padding值部分
(2)双飞翼布局
给主要内容部分的添加一个外层元素,其他非主要元素所占据的空间是主要部分的margin空间,就像鸟儿的一双翅膀