圣杯布局
【摘要】 圣杯布局和飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局针对的是左右栏固定，中间栏自适应的网页布局。
它的布局有以下几点：
1、三列布局，中间宽度自适应，左右定宽
2、中间栏要在浏览器中优先展示渲染
3、允许任意列的高度最高
初始代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
.container {
height: 200px;
}
.middle {
background: red;
height: 200px;
}
.left {
background: yellow;
height: 200px ;
width: 200px;
}
.right {
background: pink;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>图1. 样式
图二，设置浮动使三个样式在一行
在left,right,middle 添加float:left 浮动,这时候会发现middle宽度缩小.
图三，改变中间宽度
添加middle为 width: 100%，中间部分middle设置100%会撑满，这样因为浮动的关系，middle会占据整个container，左右两块区域被挤下去.
图三，移动左边到第一行左侧
在left样式增加margin-left：-100%为负值，让left回到第一行左侧位置
图四：移动右边到第一行右侧
在right样式增加margin-left: -200px, 200px是右边的自身高
图五：改变父元素的内边距
在.container增加padding: 0 200px;
图六：此时发现左右元素遮挡了中间元素的内容，我们通过相对定位position定位属性来解决
在left和right样式里面添加postition: relative, 被设置为relative相对定位后，其元素不会脱离标准流，不会影响其他元素的排布。
在left样式增加 left:-200px; , right样式增加 left:200px; 向左增加负200px元素，把左边顶到第一行前端，right想左增加200px元素正好把右边顶到第一末端.
代码如下：
总结圣杯布局和飞翼布局区别：
圣杯布局和飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
技术火炬手2020/07/02 10:47:451楼编辑删除举报