CSS 面试题

128 阅读1分钟

1.双飞翼布局  圣杯布局

左右两边固定宽度,中间宽度自适应的三栏式布局

双飞翼布局和圣杯布局都是实现上述的结果  只是实现方式不同

圣杯思想是在左 中 右三个盒子外面加一个大盒子,给left、、center、right三个盒子设置浮动,左右两个固定宽度 中间的宽度100% 。大盒子设置padding为左右盒子的宽度, 用负外边距margin-left来使得左右两个盒子与宽度为100%的中间盒子处于同一行。再用相对定位使得左右盒子向左向右偏移 不挡住中间盒子的内容

双飞翼布局是单独给中间盒子加一个父盒子 并且设置中间盒子的margin-left和margin-right以此来实现左右区域不挡住中间区域 剩下与圣杯一致