四种方式
比如想要做这样一个布局，有哪几种方式。
最简单、最快捷的方式。
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的值也要注意计算哦~
清除浮动
在使用浮动的时候会经常遇到一个古怪的事情，就是 对图片运用float属性，但是图片比包含该图片的元素还高，所以图片就溢出到了外面，解决方法是：清除浮动，一个简单的解决方案是，对这个容器（包含图片的父容器）设置{overflow:autozoom:1}
inline-block布局可以使用inline-block布局，但要注意一些事情。(1)vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top；(2)需要设置每一列的宽度；(3)如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
盒子模型 有两种很重要的盒子模型，分别是ie盒子模型和w3c盒子模型。w3c盒子模型是标准的盒子模型，范围包括margin,border,padding,content.并且content部分不包括其他；IE盒子模型范围包括margin,border,padding,content，但是ie盒子模型的content部分包含了border和padding
box-sizingbox-sizing的CSS属性是用来改变默认的css框模型，用于计算元素的宽度和高度，它可以使用这个属性来模拟浏览器的行为不正确支持css模型的规范。box-sizing的属性的默认取值是content-box，测量width和height属性只包括content，但不是border,padding,margin；padding-box的width和height属性包括content和padding的大小，不包括border和margin；border-box的width和height属性包括padding和border，但不是margin。
position有四个属性值：static relative absolute fixed。static是position属性的默认值，即按文档流顺序排列下去；relative将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，如果不设置relative属性，元素的位置按照正常的文档流；absolute是按照元素的父级对象（父元素，祖父元素，曾祖父元素等等）设置的Position属性，只要不是static，的那个元素进行定位；fixed属性总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似
