四种方式
比如想要做这样一个布局，有哪几种方式。
最简单、最快捷的方式。
element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。
相对简单的方式。
利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。
原生css布局的方式，float布局，也是最基础的方式。
将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。
原生css布局的方式，position布局，也是最基础的方式。
sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~
CSS英文全称：Cascading Style Sheets(层叠样式表)是为了丰富网页布局的样式，在CSS没有出来之前，大家会用表格来进行分割布局，很不方便，CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面，但是正如上面说的，HTML无法满足新时代网站拥有者的表达需求，我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如：
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}
.csl{width:20%height:160pxfloat:leftbackground:#fff}
.csr{width:20%height:160pxfloat:rightbackground:#fff}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
