【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 布局-居中布局-水平居中布局;
评论