圣杯布局

圣杯布局

概述：布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局

布局要求有几点：

• 三列布局，中间宽度自适应，两边定宽；
• 中间栏要在浏览器中优先显示渲染
• 允许三列中的任意一列成为最高列

---

1、DOM结构

首先定义出整个布局的DOM结构，主要部分是由container包裹的center、left、right三部分组成。其中center定义在最前面

<div class="container">
        <div class="center">中间栏</div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
</div>

2、CSS代码

首先清除掉多余的内外边距

body{
​    margin: 0;
​    padding: 0;
}

接下来的步骤：

1. 设置父盒子container的位置
2. 将主体部分的center、left、right设置为左浮动
3. 设置center的宽度为100%、让其独占一行
4. 设置left、right负的外边距
5. 使用相对定位将left和right移动到相应的位置

为了保证网页不变形且能够看见container容器，需要在父容器上设置最小宽度且同时设置宽度和背景颜色

.container{
    min-width: 400px; /*设置父盒子的最小宽度*/
    height: 200px;
    background-color:red;
    padding: 0 200px; /*给左右两个盒子预留出位置*/
}

设置center的格式：

.center{
    width: 100%; /*设置中间盒子的宽度为100%、让其独占一行*/
    height: 200px;
    float: left;
    background-color: yellow;
}

设置 left 的格式：

.left{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
    margin-left: -100%;
     position: relative;
    left:-200px;
}

设置 right 的格式：

.right{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    float: left;
    position: relative;
    margin-right: -100%;
}