Web 前端：布局
学习了一些基础的 HTML 以及 CSS 的概念后就可以制作一个简单的网页了。
除了页面的结构与表现，另一个让页面变得美观的因素就是布局，此处仅做导航使用。
常用的布局
CSS 中的布局有很多，这里只列举一下我接触过的几种：
- 盒模型布局
- Position 定位（绝对定位与相对定位）
- 浮动布局
- Flex 布局
- Grid 布局
除此之外，HTML 中的结构，也影响布局的效果，所以想要实现目标效果，我们需要：
- 合理的使用 HTML 描述网页的结构；
- 使用 CSS 进一步的细化布局。
<div>
<div class="first">
I'm first.
</div>
<div class="second">
I'm second.
</div>
</div>
<div>
<div class="first">
I'm first.
<div class="second">
I'm second.
</div>
</div>
</div>
<style>
.first {
color: red;
margin: 10px;
}
.second {
color: green;
margin: 10px;
}
</style>
HTML 像是在宏观上进行布局的控制，例如哪几个元素是挨着的、这个元素应该在哪个元素里面、元素之间的顺序是什么等等。
CSS 则是在更加细节的方面进行控制，例如元素的大小、元素的颜色、元素是纵向排列还是横向排列等等。
因为浮动布局本人使用较少，在此就不再提及了。
传统布局
盒模型布局
该布局主要是利用盒模型的 maring、padding 等属性进行位置的控制，使元素达到预期的显示效果。
该种布局通常会和其他布局结合使用。
在开发者工具中我们可以看到浏览器渲染的盒模型：
更具体的内容不再赘述，可以查看菜鸟教程中关于和模型的介绍：
菜鸟教程 – 盒子模型
Position 定位
起初学习了 flex 布局后感觉绝对定位与相对定位就没有了太大的用处，但是随着之后的学习，发现有些功能使用绝对定位与相对定位会更加的方便。
关于如何使用 Position 定位的，可以参阅菜鸟教程：
菜鸟教程 – Position 定位
也可参阅本篇博客：
CSS的定位-子绝父相
注意，在此处需要了解文档流的概念。开启了绝对定位的元素会脱离文档流，我们也可以通过设置 z-index 来设置层级关系来产生遮盖的效果。
这里列举几个之前遇到的使用 Position 定位完成布局的例子：
- 网站导航栏始终位于页面上方
- 不随着滚动条滚动而改变位置
- 自定义的栏目小图标
- 一行文字+两个装饰，直接使用图片分辨率太低
- 使用 HTML + CSS 实现弹幕效果
- 弹幕移动的初始位置和结束位置使用绝对定位解决
flex 布局
flex 布局又称弹性布局。这个布局可能是我用的最多的布局了，特别是青春在线转向小程序以后，对布局的要求更低了，所以偏爱 flex。
这是初学 flex 时完成的一个经典作业：
Youthol作业 – 骰子
优点很明显，上手很快，很便捷的居中、等比例排列、对齐等操作。不需要设置具体的数值再配合百分比，能够很快制作出一个观感较好的页面。
这里给出菜鸟上的一个教程：
菜鸟教程 – Flex 布局语法教程
但是缺点也比较明显，如果想要更细致的控制布局，flex 可能是做不到的（或者是不方便），例如起初想用 flex 实现对不同宽高的屏幕进行自动适配（响应式），可惜自己的技术学习的太浅，最终效果不太理想。
想要实现响应式，还是媒体查询 + grid 布局更为方便。
grid 布局
grid 布局又称网格布局、栅格布局。早前可以通过 Bootstrap 在 HTML 中为标签添加不同的 class 实现栅格布局，目前的多数浏览器都已经支持了原生的 grid 布局，不需要依赖第三方包。
原生的 grid 和 Bootstrap 中的栅格布局区别在于在哪儿控制布局：
| 原生 Grid | Bootstrap | |
|---|---|---|
| 在哪控制布局 | CSS 中 | HTML 中 |
Bootstrap 可以戳：Bootstrap 5
原生 Grid 可以戳：菜鸟教程 – Grid 布局
使用网格布局可以配合媒体查询很便捷的设计出响应式的网页。
其他语言中的布局
在学习过 Web 后会发现很多语言中有关 GUI 或者图形布局的规则都与上面说的几个布局类似，例如 QT、Java Swing、Python等等，在以下这篇文章中有所提及（由于文章并非介绍布局，仅在创建控件部分引用了一些代码供以参考）：
QT：快速了解基本概念
