本篇继承上一篇中对CSS使用场景与技巧的总结，开始梳理布局方式的使用。
常规布局
常规布局分为行、块、表格、Flexbox与Grid，在本次实践中，Flexbox几乎被用于所有的组件中，有由下两种较为特殊的使用技巧：
-
如何在同一行放置左右分别对齐的两个组件
首先确定的是要使用flex布局，其次，justify-content要选择space between，而对于两个元素，一定会有一个是在最左侧/右侧，此组件justify-content应设置为start/end，而另一个需要设置margin left/right为auto，并且有时有必要将flex-grow设置为1，这样只有此元素的长度会随着页面尺寸变化动态变化，而左右对齐的元素绝对大小与位置不会发生改变。
-
如何组织竖行排列的若干组件
需要使用flex-direction: column，此处需要注意的是，往往在垂直方向排列组件时，需要考虑对齐的问题，而这种情况下，justify-content与align-item和row相比，似乎作用是相反的，因此如果需要居中，设置的应该是align-item。
浮动布局
浮动布局在此项目中并未使用，似乎除了文字与图片排版，也并没有过多的使用场景，此处略过
绝对定位
作为常规布局的辅助，绝对定位在若干场景中获得了应用：
absolute用于历史面板的定位，其位于main navigation的按钮层次之下，因此相对于父组件，right设置为0与其对齐，top则相差30px留出一些空间。
fixed用于点击弹出的背景：相对整个视窗，top与left均为0，如果将长宽均设置为100%，这个背景就填充满了整个视窗
relative则用于list元素的定位，相对于整个ul
