这是我参与「第四届青训营 」笔记创作活动的的第2天。
写在前面
在实际的学习中，CSS 最令我头疼，作为一个强迫症以及美化追求者，无法忍受过于简陋的默认 HTML 标签。但是除去无设计灵感外，各种样式属性的组织也觉得繁琐。目前，前端领域有许多优秀的CSS框架（Bootstrap、Mustard UI、TailWindcss）。
前端页面的设计，各组件的布局最为重要，用于页面排版。
介绍
CSS页面布局包括：
- 正常布局流
display- 弹性盒子
- 网格
- 浮动
- 定位
- CSS 表格布局
- 多列布局
css 页面布局通过设定 display 属性值实现，如使用display:block或display:inline可以更改 HTML 元素为块级元素或者内联。还有display:flex和display:grid来设置 flex 和 grid 布局。
正常布局流
正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
HTML 元素完全按照源码中出现的先后次序显示。
当使用 css 创建布局时，就会离开正常布局流。如使用：display、浮动、position、表格、多列（Multi-column layout）。
弹性布局（Flex）
弹性盒子（Flexbox）用于创建横向和纵向页面布局，通过设置display:flex。
弹性盒子的子元素会自动按列进行排列，子元素都变成了 flex 项(flex items)，会按照父元素的 flex 相关属性进行布局。排成一行是因为父元素flex-direction初值为row。全都被拉伸至和最高的元素高度相同，是因为父元素上align-items属性的初值是stretch。
若将子元素添加flex属性，子元素会伸展填充容器。
Grid 布局
Grid 布局用于同时在两个维度上把元素按照列和行排列。通过display:grid指定布局。
grid 布局可以显式摆放元素，利用grid-column和grid-row指定子元素从某一行/列开始，在某行/列结束：
浮动
浮动就是让一个元素浮动起来，一个元素浮动会改变该元素和正常布局流中跟随它的其他元素行为，float 可选值由：left、right、none、inherit。该元素浮动到左侧或右侧时，周围内容就会在浮动元素周围环绕。
