通常提到的布局,有两个共同点:
- 大多数用于 PC 端,因为 PC 端屏幕像素宽度够大,可布局的空间也大;
- 布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多数时候讨论的布局都是对水平方向进行分割。
按分列数目可分为四类:
- 单列布局;
- 2 列布局;
- 3 列布局;
- 垂直三栏布局。
单列布局
单列布局是最常用的一种布局,它的实现效果就是将一个元素作为布局容器,通常设置一个较小的(最大)宽度来保证不同像素宽度屏幕下显示一致。
2 列布局
2 列布局使用频率也非常的高,实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满。为了描述方便,我们暂且称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器。
3 列布局
3 列布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之。3 列布局和 2 列布局类似,也有明确的主次关系,只是关系层次增加了一层。
2列3列布局实现
单列布局没有太多技术难点,通过将设置布局容器(最大)宽度以及左右边距为 auto 即可实现。
要实现 2 列布局或 3 列布局,可以按照下面的步骤来操作:
- 为了保证主要布局容器优先级,应将主要布局容器写在次要布局容器之前;
- 将布局容器进行水平排列;
- 设置宽度,即次要容器宽度固定,主要容器撑满;
- 消除布局方式的副作用,如浮动造成的高度塌陷;
- 为了在窄屏下也能正常显示,可以通过媒体查询进行优化。
垂直三栏布局
这种布局将页面分成上、中、下三个部分,上、下部分都为固定高度,中间部分高度不定。当页面高度小于浏览器高度时,下部分应固定在屏幕底部;当页面高度超出浏览器高度时,下部分应该随中间部分被撑开,显示在页面最底部。
这种布局也称之为”sticky footer“,意思是下部分粘黏在屏幕底部。要实现这个功能,最简单的就是使用 flex 或 grid 进行布局。