圣杯布局

什么是圣杯布局

两边固定宽度，中间自适应宽度。

将中间的宽设置成100%会自适应页面宽度

    .content {
        width: 100%;
        height: 200px;
        background-color: green;
    }

要将left-item和right-item的位置预留出来

    .container {
        overflow: hidden;
        padding-left: 200px;
        padding-right: 150px;
        background-color: #ccc;
    }

将left-item和right-item放到相应的位置上

    .left-item {
        width: 200px;
        /* 将margin-left设置成-100%会跑到父级内容的最左边 */
        margin-left: -100%;
        /* 相对定位：在文档流内对其他元素不造成影响 */
        position: relative;
        right: 200px;
        background-color: red;
    }

    .right-item {
        width: 150px;
        /* 给一个元素设置marign负值就是减少多少，认为宽度减少了就跑到上面去了 */
        margin-right: -150px;
        background-color: blue;
    }

难点

• margin-left:-100%；100%是父级宽度的100%
• margin-right：150px；其它元素当他（margin-right）宽度少了150px