一、布局方式
1. 流动布局
流动布局是HTML默认的布局方式，流动布局随文档流自上而下按顺序动态分布。流动布局只根据元素排列的先后顺序决定显示位置。如果要改变元素的显示位置，只能通过改变HTML文档结构实现。
流动布局有以下两个比较典型的特征:
块状元素都会在包含元素内自上而下按顺序堆叠分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%
行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推。
2. 表格布局
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格是以行和列的形势显示信息，常用于显示网格结构的数据。
常用的表格属性:
| 属性名 | 属性值 | 描述 |
|---|---|---|
| border-collapse | collapse | 合并边框线 |
| cellpadding | number | 边距 |
| cellspacing | number | 间距 |
| rowspan | number | 跨行合并 |
| colspan | number | 跨列合并 |
3. 浮动布局
一旦标准流中元素被加了float:left或float:right样式，则元素就变为了浮动元素，脱离文档流。
- 浮动元素之间共享一行
- 浮动元素的width、height默认由元素内容决定，而不是由父级决定
- 浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
- 浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的
- 浮动元素之间紧密贴合，不会发生覆盖现象。
- 如果目前顶部的行的剩余宽度不足以放下新的浮动元素，则新的浮动元素自动另起一行排列。
- 容易出现高度塌陷问题
| 属性名 | 属性值 | 描述 |
|---|---|---|
| float | none | 默认无浮动 |
| left | 左浮动 | |
| right | 右浮动 | |
| clear | left | 清除当前元素前面的，左浮动元素脱标后带来的影响（高度塌陷） |
| right | 清除当前元素前面的，右浮动元素脱标后带来的影响（高度塌陷） | |
| botn | 清除当前元素前面的，左、右浮动元素脱标后带来的影响（高度塌陷） |
4. 定位布局
定位布局可以精确控制网页对象的显示位置
| 优点 | 缺点 |
|---|---|
| 布局精准，不会出现错行和误差问题 | 缺乏灵活性，栏目之间不能够协同变化，还会存在叠加等风险 |
| 属性名 | 属性值 | 描述 |
|---|---|---|
| postion | relative | 相对定位，相对于元素本身 |
| absolute | 绝对定位，相对于开启定位的父元素 | |
| static | 不定位、默认值 | |
| fixed | 固定定位，相对于窗口 |
5. 弹性布局(flex布局)
- 作用： 和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单 （推荐使用）。
- 组成： 弹性容器+弹性盒子+主轴+侧轴
| 属性名 | 属性值 | 描述 |
|---|---|---|
| display | flex | 开启弹性布局 |
| justify-content 主轴对齐方式 |
flex-start | 左对齐(默认) |
| flex-end | 右对齐 | |
| center | 居中对齐 | |
| space-between | 均匀分布、左右不留 | |
| space-around | 均匀分布、左右少许间隙 | |
| space-evenly | 均匀分布、左右相等间隙 | |
| align-items 侧轴对齐方式 |
flex-start | 上对齐 |
| flex-end | 下对齐 | |
| center | 居中对齐 | |
| stertech | 拉伸铺满(默认) | |
| inline | 根据内容文字对齐 | |
| align-content 行对齐方式 只有1行时不生效 |
flex-start | 上对齐 |
flex-end |
下对齐 | |
| center | 居中对齐 | |
| space-between | 均匀分布、上下不留 | |
| space-around | 均匀分布、上下少许间隙 | |
| space-evenly | 均匀分布、上下相等间隙 | |
| flex-dirction 改变主轴方向 |
row | 从左往右(默认) |
| row-reverse | 从右往左 | |
| column | 从上到下 | |
| column-reverse | 从下到上 | |
| flex-wrap 换行 |
nowrap | 不换行(默认) |
| wrap | 换行 | |
| wrap-reverse | 向上换行 |
| 属性名 | 属性值 | 描述 |
|---|---|---|
| flex | 0 | 1 | auto | 放大比例 | 缩小比例 | 分配多余空间之前占比 |
| order | number | 权重、控制排列顺序 |
| align-self 侧轴对齐方式 |
auto | 默认使用父元素的align-items |
| flex-start | 上对齐 | |
| flex-end | 下对齐 | |
| center | 居中对齐 | |
| baseline | 文字对齐 | |
| stretch | 拉伸铺满 |
6. 栅格布局(grid布局)
CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。
栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。
对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可
| 属性名 | 属性值 | 举例 | 描述 |
|---|---|---|---|
| display | grid | 开启块元素栅格布局 | |
| inline-grid | 开启行内块元素栅格布局 | ||
| grid-template-rows | repeat(12, 1fr) | 划分行(像素、百分比、rf) | |
| grid-template-columns | repeat(12, 1fr) | 划分列 | |
| rows-gap | 行间距 | ||
| columns-gap | 列间距 | ||
| grid-auto-flow | column | 按列排序 | |
| row | 按行排序(默认) |
7. 圣杯布局和双飞翼布局
圣杯布局和双飞翼布局最终效果相同，具有相同的特点
- 两侧宽度固定，中间宽度自适应（三栏布局）
- 中间部分在DOM结构上有限，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的div标签
圣杯布局代码
<div class="header"></div>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
双飞翼布局代码
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
最终效果
- 圣杯布局代码结构上更加自然和直观，在平时的开发中更容易形成这样的布局结构；
- 双飞翼布局由于不使用定位，所以代码更加简洁，允许页面的最小宽度小于圣杯布局。
