页面常用的三栏布局与两栏布局?

两栏布局（左边宽度固定，右边自适应）

1、左边float：left；右边overflow：hidden

<template>
  <div>
    <div class="cantainer">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>
<style>
.left {
  width: 200px;
  height: 300px;
  background-color: pink;
  float: left;
}
.right {
  height: 500px;
  background-color: skyblue;
  overflow: hidden;
}
</style>

2、左边浮动float：left；右边盒子的margin-left：左边盒子的宽度

<template>
  <div>
    <div class="cantainer">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>
<style>
.left {
  width: 200px;
  height: 300px;
  background-color: pink;
  float: left;
}
.right {
  height: 500px;
  background-color: skyblue;
  margin-left: 200px;
}
</style>

三栏布局（左右两边固定200px，中间自适应）

1、定位法

将父元素设置为position:relative.
左边元素:position:absolute;
left:0;
top:0;
右边元素:positon:absolute;
right:0;
top:0;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度

2、浮动法

将左边元素设置为左浮动:float:left;
将右边元素设置为右浮动:float:right;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.
中间元素会自动居中
注意的是:html中,中间元素必须写在最后！否则不能居中