前端学习笔记之掌握css精髓：布局

通常提到的布局，有两个共同点：

• 大多数用于 PC 端，因为 PC 端屏幕像素宽度够大，可布局的空间也大；
• 布局是有限空间内的元素排列方式，因为页面设计横向不滚动，纵向无限延伸，所以大多数时候讨论的布局都是对水平方向进行分割。

按分列数目可分为四类：

• 单列布局；
• 2 列布局；
• 3 列布局；
• 垂直三栏布局。

单列布局

单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下显示一致。

2 列布局

2 列布局使用频率也非常的高，实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。为了描述方便，我们暂且称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器。

3 列布局

3 列布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。3 列布局和 2 列布局类似，也有明确的主次关系，只是关系层次增加了一层。

2列3列布局实现

单列布局没有太多技术难点，通过将设置布局容器（最大）宽度以及左右边距为 auto 即可实现。
要实现 2 列布局或 3 列布局，可以按照下面的步骤来操作：

1. 为了保证主要布局容器优先级，应将主要布局容器写在次要布局容器之前；
2. 将布局容器进行水平排列；
3. 设置宽度，即次要容器宽度固定，主要容器撑满；
4. 消除布局方式的副作用，如浮动造成的高度塌陷；
5. 为了在窄屏下也能正常显示，可以通过媒体查询进行优化。

垂直三栏布局

这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。
这种布局也称之为”sticky footer“，意思是下部分粘黏在屏幕底部。要实现这个功能，最简单的就是使用 flex 或 grid 进行布局。