经典三栏布局前端入门布局

1、float + margin(浮动布局)

<template>
  <div class="container">
    <div class="left">Left</div>
    <!-- 右边要写在中间 -->
    <div class="right">Right</div>
    <div class="main">Main</div>
  </div>
</template>

<style scoped>
html,body, .container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* 左侧 左浮动 */
.left {
  float: left;
  height: 100%;
  width: 200px;
  background: #e056fd;
}
/* 右侧 右浮动 */
.right {
  float: right;
  height: 100%;
  width: 200px;
  background: #e056fd;
}
/* 中间 */
.main {
  height: 100%;
  margin: 0 200px;
  background: #686de0;
}

</style>

• 要注意两点，在DOM中main这块内容要写在最后，在写main的css margin 左右两边值要对等
• 优点：快捷 简单 兼容性好
• 缺点： 有局限性 脱离文档流 清浮动

2、position (绝对定位)

<template>
  <div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
  </div>
</template>

<style scoped>
html,body, .container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.left, .right {
  position: absolute;
  height: 100%;
  top: 0;
  background: #e056fd;
}
.left {
  left: 0;
  width: 200px;
}
.right {
  right: 0;
  width: 200px;
}
/* 中间 */
/* .main {
  height: 100%;
  margin: 0 200px;
  background: #686de0;
} */
/* 或者用绝对定位 */
.main {
  position: absolute;
  height: 100%;
  right: 200px;
  left: 200px;
  background: #686de0;
}

</style>

• 优点：简单
• 缺点： 脱离文档流 高度未知会出问题

3、flex(弹性盒子布局)

<template>
  <div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
  </div>
</template>

<style scoped>
html,body, .container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.left, .right {
  width: 200px;
  background: #e056fd;
}
.main {
  /* flex: 1; */
  flex: 1 0 0;
  background: #4834d4;
}

</style>

• 优点：简单 移动端首选
• 缺点： 支持ie 10以上

4、grid (布局)

<template>
  <div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
  </div>
</template>

<style scoped>
html,body, .container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container {
  display: grid;
  grid-template-rows: 100%; /* 设置行高 */
  grid-template-columns: 200px auto 200px; /* 设置列属性 */
}
.left, .right {
  background: #e056fd;
}
.main {
  background: #4834d4;
}

</style>

• 优点：简单、下一代css布局
• 缺点： 支持ie 10以上