圣杯模型（圣杯布局）

1。圣杯模型

圣杯模型是工作中经常可以用到的一种模型，分为三部分，左边，右边和中间三个部分，中间内容先渲染且自适应窗口，两边固定宽度。

办法有两种，学过flex布局的小伙伴可以直接看方法二，没学过flex布局的我稍后几天就会马上更新。

方法一：

   <div class="box">
        <!-- 浏览器解析代码是从上到下解析，要想先渲染，就要把先渲染的元素内容写在上面 -->
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 圣杯布局：两边固定宽度，中间先渲染并且自适应 */
        .box {
            /* 3.给三个盒子外面的大盒子添加一个内边距，然后两边内容相对定位出去就可以了 */
            padding: 0 200px;
        }

        .left,
        .right {
            width: 200px;
            height: 300px;
            background-color: orange;
            float: left;
            border: 1px solid black;
            box-sizing: border-box;
        }

        /* 1.首先，先让三个元素都浮动起来 这样三个块级元素就可以排成一排*/
        .center {
            width: 100%;
            float: left;
            height: 600px;
            background-color: pink;
        }

        .left {
            margin-left: -100%;
            /*2. 给左边的内容添加一个做外边距为-100% */
            position: relative;
            left: -200px;
            /* 3.相对定位，相对于自己本身向左移一个自己的宽度 */
        }

        .right {
            margin-left: -200px;
            /* 2.右边的盒子左外边距为盒子本身的宽度 */
            position: relative;
            right: -200px;
            /* 3.相对定位， 相对于自己本身右移一个自己的宽度 */
        }
    </style>

1.浮动之后的效果：

2.加完左右两个盒子的外边距的效果：

3.添加三个盒子外边的大盒子的内边距的效果：

3.2用完定位后的效果：

方法二：

<div class="box1">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>

    </div>

    <style>
        .box1 {
            /* 1.大盒子进行flex布局，默认排成一排 */
            display: flex;
        }

        .left {
            width: 100px;
            height: 300px;
            background-color: pink;
            /* 3.给左边盒子设置order：-1 */
            /* order:-1 的意思是在flex布局里面的子元素的排列顺序，order值越小，越排在左边 */
            order: -1;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: orange;
        }

        .center {
            /* 2.给中间的内容设定flex：1 */
            /*flex:1 意思是除了设定固定的宽度之外的区域都是这个元素的 */
            flex: 1;
            background-color: black;
            height: 600px;

        }
    </style>

1.刚给大盒子加flex布局的效果：

因为中间的元素没有内容，所以没有显示，所以第二部是给content加上flex:1的属性

2.加完内容的效果：

想要left显示在左边要用到order属性，所以下一步是加order

3.加完order属性的效果：

这样，一个圣杯布局就完成啦，小伙伴们，圣杯布局可是工作中经常用到的布局哦，大家可要仔细的去练一练哦！