「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」。
一，前言
上一篇，介绍了 CSS 变量的相关知识，主要涉及以下几个点：
- CSS 变量简介；
- CSS 变量的使用；
- CSS 变量的作用域；
- CSS 变量的继承特性；
- CSS 变量的兼容性；
从本篇开始，进入对 CSS 布局的介绍；
本篇，先对 CSS 布局进行一下简单概括；
备注：CSS 布局可以说是 CSS 领域的重中之重，就好比“称霸了篮板。。。”
二，CSS 布局简介
1，什么是布局
- 布局，是指 HTML 页面的整体结构或者骨架，相当于报纸和杂志中的排版概念；
- 布局，实际上并不属于技术范畴一类，而更偏向于一种设计思想；
2，CSS 布局的发展
table 布局
早期的布局，主要以 table 布局为主
- 优点：简单易用，兼容性好；
- 缺点：不易于维护；
随着网站复杂度增加、业务和需求变化加快，table 布局开始显得力不从心；
table 布局的发明者 David Siegel 说：“我把炸酱和面倒在了一起，并且没法分开它”
css + div 布局
这时，就有了 CSS + div 布局
- 优点：学习成本低，开发效率高，维护成本较低；
- 缺点：移动端布局、响应式布局困难；
后来，随着行业移动端业务和需求的暴增，CSS + div 布局也就不太够用了；
Flex 布局
CSS3 推出了 Flex 布局 优点：在不依赖其他框架的情况下，快速实现各种响应式布局； 缺点：兼容性需要 IE9+，不同浏览器内核写法上需要做兼容处理；
三，按布局技巧分类
| 主题 | 描述 | 备注 |
|---|---|---|
| table 布局 | 表格布局 | 目前开发中已基本不在使用 |
| float 布局 | 浮动布局 | |
| inline-block 布局 | 让元素在一行显示 | |
| box 布局 | 盒模型布局 | |
| flexbox 布局 | 弹性盒布局 | 有兼容要求 适用于移动端响应式适配 |
| grid 布局 | 网格布局 | |
| columns 布局 | 多列布局 | 实现三列布局效果 |
| shapes 布局 | 实现文字环绕效果 |
四，按布局效果分类
- 居中布局
- 水平居中布局(5种)
- 垂直居中布局(5种)
- 水平垂直居中布局
- 多列布局
- 两列布局
- 三列布局
- 圣杯布局
- 双飞翼布局
- 多列布局(CSS3 新增)
- 全屏布局
- 等分布局
- 等高布局
- 全屏布局
五，常见面试题
CSS 布局知识也是前端面试的重要考察点，一般会考察以下内容：
- 已知/未知宽高，如何实现水平垂直居中效果；
- 说出至少 n 种实现两列、三列布局的方法；
- 移动端响应式布局；
- 圣杯、双飞翼，等等。。。
六，结尾
本篇，主要对 CSS 布局进行了概括性介绍，主要涉及以下几个点：
- CSS 布局简介、布局的发展历史；
- CSS 布局技巧、常见布局效果，面试题；
下一篇，介绍 CSS 布局-居中布局-水平居中布局；
维护记录
- 20211202
- 优化了“按布局技巧分类”部分；
- 重做了“按布局效果分类”部分；
