【CSS 知识总结】第六篇 - CSS 布局概述

一，前言

上一篇，介绍了 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+，不同浏览器内核写法上需要做兼容处理；

三，按布局技巧分类

四，按布局效果分类

• 居中布局
  • 水平居中布局(5种)
  • 垂直居中布局(5种)
  • 水平垂直居中布局
• 多列布局
  • 两列布局
  • 三列布局
  • 圣杯布局
  • 双飞翼布局
  • 多列布局(CSS3 新增)
• 全屏布局
  • 等分布局
  • 等高布局
  • 全屏布局

五，常见面试题

CSS 布局知识也是前端面试的重要考察点，一般会考察以下内容：

• 已知/未知宽高，如何实现水平垂直居中效果；
• 说出至少 n 种实现两列、三列布局的方法；
• 移动端响应式布局；
• 圣杯、双飞翼，等等。。。

六，结尾

本篇，主要对 CSS 布局进行了概括性介绍，主要涉及以下几个点：

• CSS 布局简介、布局的发展历史；
• CSS 布局技巧、常见布局效果，面试题；

下一篇，介绍 CSS 布局-居中布局-水平居中布局；

维护记录

• 20211202
  • 优化了“按布局技巧分类”部分；
  • 重做了“按布局效果分类”部分；