几种常见的css布局方式

四种方式

• element-ui布局容器（el-container）
• element-ui布局（el-row、el-col）
• 绝对定位（absolute）
• 浮动（float）

比如想要做这样一个布局，有哪几种方式。

TIM图片20190513111605.png

1. element-ui布局容器

最简单、最快捷的方式。

 <el-container>
    <el-header class="header" height="66px">Header</el-header>
    <el-container>
      <el-aside class="siderBar" width="200px">Aside</el-aside>
      <el-main class="main"></el-main>
    </el-container>
    <el-footer class="footer" height="66px">Footer</el-footer>
  </el-container>

element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。

2. element-ui布局

相对简单的方式。

  <el-row>
      <el-col :span="24" class="header">header</el-col>
      <el-col :span="4" class="sideBar">aside</el-col>
      <el-col :span="20" class="mainShow">main</el-col>
      <el-col :span="24" class="footer">footer</el-col>
  </el-row>

利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。

3. 浮动

原生css布局的方式，float布局，也是最基础的方式。

-- html -- 
<div>
    <div class="header">header</div>
    <div class="sideBar">aside</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  </div>

.header {
  background-color: blue;
  height: 66px;
}
.sideBar {
  background-color: red;
  width: 200px;
  float: left;
  height: calc(100vh - 132px);
}
.main {
  background-color: green;
  width: calc(100vw - 200px);
  float: right;
  height: calc(100vh - 132px);
}
.footer {
  height: 66px;
  background-color: yellow;
  float:left;
  width: 100vw;
}

将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度，注意高度是 100vh - 上下header和footer高度之和。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。

4.绝对定位

原生css布局的方式，position布局，也是最基础的方式。

  <div>
    <div class="header">header</div>
    <div class="sideBar">sideBar</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  </div>

.header {
  background-color: blue;
  height: 66px;
}
.sideBar {
  background-color: green;
  width: 200px;
  position: absolute;
  height: calc(100vh - 132px);
}
.main {
  background-color: red;
  width: calc(100vw - 200px);
  height: calc(100vh - 132px);
  margin-left: 200px;
}
.footer {
  background-color: yellow;
  height: 66px;
  position: fixed;
  bottom: 0;
  width: 100vw;
}

sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~