0 环境
1 参考文档
2 前言
结合下图的布局样式和相关代码，可以看出， 纵向布局左右布局：左边区域是侧边栏，右边区域是header和main上下瓜分。 经典布局左右布局：上边区域是header，右边区域是侧边栏和main左右瓜分。
说白了就是侧边栏冒不冒头的区别。经典布局主要是在src/layouts/LayoutClassic目录下。然后具体的vue和js都在它里面。
3 正文
布局如下图：
我们先禁用css样式时，它的样式如下图：
看下图代码：
先设置宽高100%，先占满。
1 el-header
要分析的代码如上图：
首先看头部的样式，先是设置了盒模型，不让它乱跑，在往下设置弹性布局，垂直居中，然后两端对齐，均匀分布，因为有两个div。在往下是设置固定高度，设置右边的padding有15px的间距，意思就是头像不要太靠边。设置背景色和设置底部边框样式。
1 header-lf
其实header-lf包含了如下图的两块。它主要处理的是：水平布局、垂直居中、超出容器的多余内容隐藏、文本不换行。
其实header-lf后面还跟着个mask-image，它在src/styles/element.scss下，说白了就是从右到左的一个渐变遮罩效果。
.logo其实是下图这块的布局，设置不被收缩、设置宽度和右边距是为了和导航栏保持间距。flx-center看下第二张图，设置水平垂直居中，这里针对的是图标和标题。
.logo-img设置宽度和确保这个svg，在不同尺寸的屏幕上都能适应显示。.logo-text设置和图标的左边距，设置字体的大小和粗细，设置颜色和文本不换行。
2 classic-content
classic-content包含侧边栏和Main。设置flex布局，除了头部，高度全是它的。.el-aside 宽度自适应，设置背景色和右侧设置实线边框。.aside-box是flex布局+垂直方向上排列，高度占满，加了个平滑过渡的动画，.el-menu宽度占满，隐藏菜单的水平滚动条以及去除菜单的右侧边框，.classic-main：flex布局+垂直方向上排列。
4 总结
其实就是头上一个header，然后下面左右分。
