一般指的是左右侧固定，中间区域自适应。

    1. flex 布局，父元素设置 flex 布局，左右侧width 写死，中间部分设置 flex 为1

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>三栏布局</title>
      8. <style>
      9.  * {
      10.    margin: 0;
      11.    padding: 0;
      12.  }
      13.  html, body {
      14.    height: 100%;
      15.  }
      16.  .outer {
      17.    height: 100%;
      18.    display: flex;
      19.  }
      20.  .left {
      21.    width: 200px;
      22.    height: 100%;
      23.    background-color: pink;
      24.  }
      25.  .center {
      26.    flex: 1;
      27.    background-color: purple;
      28.  }
      29.  .right {
      30.    width: 200px;
      31.    height: 100%;
      32.    background-color: deeppink;
      33.  }
      34. </style>
      35. </head>
      36. <body>
      37. <!-- 三栏布局一般指的是左右侧固定，中间区域自适应 -->
      38. <div class="outer">
      39.  <div class="left"></div>
      40.  <div class="center"></div>
      41.  <div class="right"></div>
      42. </div>
      43. </body>
      44. </html>

    2. 利用 定位，父元素设置 相对定位，左右侧子元素设置 绝对定位，中间部分设置 margin-left 和 margin-right

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局</title>
<style>
 * {
   margin: 0;
   padding: 0;
 }
 html, body {
   height: 100%;
 }
 .outer {
   height: 100%;
   position: relative;
 }
 .left {
   width: 200px;
   height: 100%;
   background-color: pink;
   position: absolute;
   left: 0;
 }
 .center {
   background-color: purple;
   height: 100%;
   margin-right: 200px;
   margin-left: 200px;
 }
 .right {
   width: 200px;
   height: 100%;
   background-color: deeppink;
   position: absolute;
   top: 0;
   right: 0;
 }
</style>
</head>
<body>
<!-- 三栏布局一般指的是左右侧固定，中间区域自适应 -->
<div class="outer">
 <div class="left">left</div>
 <div class="center">center</div>
 <div class="right">right</div>
</div>
</body>
</html>

    3. 利用 浮动，左侧左浮动，右侧右浮动

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局</title>
<style>
 * {
   margin: 0;
   padding: 0;
 }
 html, body {
   height: 100%;
 }
 .outer {
   height: 100%;
 }
 .left {
   width: 200px;
   height: 100%;
   background-color: pink;
   float: left;
 }
 .center {
   background-color: purple;
   height: 100%;
   margin-right: 200px;
   margin-left: 200px;
 }
 .right {
   width: 200px;
   height: 100%;
   background-color: deeppink;
   float: right;
 }
</style>
</head>
<body>
<!-- 三栏布局一般指的是左右侧固定，中间区域自适应 -->
<div class="outer">
 <div class="left">left</div>
 <div class="right">right</div>
 <div class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat voluptate harum eius recusandae molestias ad minima odio aliquid adipisci aspernatur, animi quam quas laudantium! Tenetur deserunt blanditiis aperiam consequatur!</div>
</div>
</body>
</html>