什么是三拦布局

三拦布局就是中间部分宽度自适应，左侧和右侧固定宽度，形成左、中、右三栏并排展示的布局，如下图：

1.float布局

详细请看这篇# css面试题1：双飞翼布局和圣杯布局

2.position定位布局

    <header>header</header>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right ">right</div>
    </div>
    <footer>footer</footer>
```js
css代码


### 3.table布局
```js
    <header>header</header>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right ">right</div>
    </div>
    <footer>footer</footer>

css代码：

* {
    margin: 0;
    padding:0;
}
body {
    min-width: 500px;
}
header,footer {
    background-color: bisque;
    height: 50px;
    line-height: 50px;
}
footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}
.left {
    width: 100px;
    background-color: darksalmon;
    position: absolute;
    left: 0;
    top: 50px;
}
.center {
    width: 100%;
    padding: 0 150px 0 100px;
    background-color: #d8d8d8;
}
.right {
    width: 150px;
    background-color: darksalmon;
    position: absolute;
    right: 0;
    top: 50px;
}

3.table布局

* {
    margin: 0;
    padding:0;
}
body {
    min-width: 500px;
}
header,footer {
    background-color: bisque;
    height: 50px;
    line-height: 50px;
}
.container {
        display: table;
        width: 100%;
    }
    .container div {
        display: table-cell;
    }
    .left {
        width: 100px;
        background-color: darkseagreen;
    }
    .center {
        width: auto;
        background-color: #d8d8d8;
    }
    .right {
        width: 150px;
        background-color: darkslateblue;
    }

4.grid布局

<div class="container">
    <header>header</header>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
    <footer>footer</footer>
</div>

css代码

.container {
            display: grid;
            grid-template-columns: 100px auto 150px;
            grid-gap: 10px; // 定义间隔
        }
        header,footer {
            grid-column: 1/4; // footer和header占据1-4列
            background-color: darksalmon;
        }
        .left {
            background-color: darkseagreen;
        }
        .center {
            background-color: #d8d8d8;
        }
        .right {
            background-color: darkseagreen;
        }