介绍 CSS 布局

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 CSS常见布局笼统分为流动布局（正常布局流）、弹性布局、网格布局、浮动布局、定位布局、多列布局、表格布局。

常见布局方式

• 流动布局，也称为正常布局流，是CSS中元素默认的布局方式。
• 表格布局，利用table表格来进行布局。
• 弹性布局，父元素上设置display: flex，所有直接子元素都将会按照 flex 进行布局。(是现代页面中常用技术)
• 网格布局，与弹性布局类似，区别是在父元素上设置的是display: grid，所有直接子元素都将会按照 grid 进行布局。(也是现代页面中常用技术)
• 浮动布局，子元素上设置左右浮动来进行布局。
• 定位布局，父子元素上设置position来进行布局。
• 多列布局，使用column相关属性来进行布局。

流动布局和表格布局描述

流动布局

流动布局的特点包括: 元素按顺序排列、块级元素独占一行、行内元素在一行内排列、自适应宽度、文档流排列。

流动布局是最基础、最常见的布局方式，适用于大多数网页的常规布局需求。通过调整元素的display属性（如block、inline、inline-block）和盒模型属性（如width、height、margin、padding），可以对流动布局进行调整和定制。

需要注意的是，当元素脱离流动布局时，如使用绝对定位（position: absolute）或浮动（float），元素将不再按照流动布局的规则进行排列，而是根据其定位属性或浮动方向进行布局。

表格布局

HTML 表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的 CSS 之前——web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。

这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

总结

其它布局会在后续文章进行单独说明