写点什么

【CSS 学习总结】第六篇 - CSS 布局概述

作者:Brave
  • 2021 年 12 月 26 日
  • 本文字数:794 字

    阅读完需:约 3 分钟

一,前言


上一篇,介绍了 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 布局-居中布局-水平居中布局;

用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【CSS 学习总结】第六篇 -  CSS 布局概述