前面已经把大多数都给聊了一下，接下来就把剩下的常考知识点给总结完吧
你有那些方法可以实现元素的水平垂直居中
已知父子容器宽度
如果父容器和子容器的宽度都已知，可以通过设置子容器的 margin 来实现水平垂直居中。
html
<div class="parent" style="width: 500px; height: 500px; position: relative;">
<div class="child" style="width: 200px; height: 200px; margin: auto;"></div>
</div>解释：
margin: auto;可以让子元素在父容器中水平垂直居中。- 这种方法要求父容器有固定的宽高，且子元素的宽高已知。
已知子容器宽度
当子容器的宽度已知时，可以通过 position 配合 margin 负值来实现居中。
html
<div class="parent" style="width: 500px; height: 500px; position: relative;">
<div class="child" style="width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px;"></div>
</div>解释：
- 使用
position: absolute;定位子容器，使其top和left位于父容器的 50% 处。 - 通过将
margin-top和margin-left设为子容器宽高的负半值，子容器的中心点与父容器的中心点重合，从而实现居中。
未知子容器宽高
在不知道子容器的宽高时，可以使用以下几种方法来实现居中。
flex
使用 flexbox 是一种非常简便且灵活的实现方式，特别适用于动态内容。
html
<div class="parent" style="width: 500px; height: 500px; display: flex; justify-content: center; align-items: center;">
<div class="child" style="background-color: lightcoral;">Content</div>
</div>解释：
- 通过将父容器设置为
display: flex;，然后使用justify-content: center;和align-items: center;可以实现子容器的水平垂直居中。 - 该方法不需要知道子容器的宽高，非常适合自适应布局。
position + translate
结合 position 和 transform: translate 也是一种常用的居中方式。
html
<div class="parent" style="width: 500px; height: 500px; position: relative;">
<div class="child" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
Content
</div>
</div>解释：
- 子容器使用
position: absolute;定位到父容器的中心。 - 通过
transform: translate(-50%, -50%);将子容器向左和向上移动自身宽高的 50%，从而实现居中。 - 这种方法也适用于宽高未知的子容器。
grid
CSS Grid 也是一种强大的布局方式，可以轻松实现元素居中。
html
<div class="parent" style="width: 500px; height: 500px; display: grid; place-items: center;">
<div class="child" style="background-color: lightblue;">Content</div>
</div>解释：
- 通过将父容器设置为
display: grid;，并使用place-items: center;可以实现子容器的水平垂直居中。 - 这种方法同样不需要知道子容器的宽高，非常适合灵活布局。
table
将父容器设置为 display: table;，子容器设置为 display: table-cell; 并结合 vertical-align 和 text-align 属性，可以实现居中效果。
html
<div class="parent" style="width: 500px; height: 500px; display: table;">
<div class="child" style="display: table-cell; vertical-align: middle; text-align: center;">
Content
</div>
</div>解释：
- 父容器模拟为表格，子容器模拟为表格单元格，通过
vertical-align: middle;和text-align: center;实现水平垂直居中。 - 这种方法可以处理多行文本的垂直居中问题，适用于某些特定场景。
如何实现两栏布局，三栏
关于这个我前面写了一篇文章介绍了三种方法：圣杯、双飞翼、flex 经典：三栏布局
接下来把剩下的来介绍介绍
1. 网格布局 (Grid)
CSS Grid 是一种非常强大且灵活的布局方式，可以轻松实现两栏或三栏布局。它允许你在父容器上定义行和列的数量、大小及其间距，然后将子元素分配到相应的网格中。
两栏布局
html
<div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="left" style="background-color: lightcoral;">Left</div>
<div class="right" style="background-color: lightblue;">Right</div>
</div>解释：
grid-template-columns: 1fr 1fr;定义了两栏布局，每栏占据父容器的一半宽度。gap: 10px;用于设置两栏之间的间距。- 这种方式非常直观，易于调整和扩展。
三栏布局
html
<div class="grid-container" style="display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px;">
<div class="left" style="background-color: lightcoral;">Left</div>
<div class="center" style="background-color: lightgreen;">Center</div>
<div class="right" style="background-color: lightblue;">Right</div>
</div>解释：
grid-template-columns: 1fr 2fr 1fr;定义了三栏布局，中心栏占据两倍于侧栏的宽度。- Grid 布局不仅适用于简单的两栏或三栏布局，还能处理更复杂的网格布局。
2. 表格布局 (Table)
虽然表格布局已经不再是现代网页设计的主流方式，但在某些场景下，尤其是处理数据或文本对齐时，表格布局仍然有其独特的优势。
两栏布局
html
<div class="table-container" style="display: table; width: 100%;">
<div class="table-row" style="display: table-row;">
<div class="table-cell left" style="display: table-cell; width: 50%; background-color: lightcoral;">Left</div>
<div class="table-cell right" style="display: table-cell; width: 50%; background-color: lightblue;">Right</div>
</div>
</div>解释：
display: table;将父容器模拟为表格，display: table-row;和display: table-cell;模拟表格行和单元格。- 子容器的宽度可以使用百分比或其他单位定义，实现两栏布局。
- 表格布局在处理内容自动适应高度时有优势。
三栏布局
html
<div class="table-container" style="display: table; width: 100%;">
<div class="table-row" style="display: table-row;">
<div class="table-cell left" style="display: table-cell; width: 25%; background-color: lightcoral;">Left</div>
<div class="table-cell center" style="display: table-cell; width: 50%; background-color: lightgreen;">Center</div>
<div class="table-cell right" style="display: table-cell; width: 25%; background-color: lightblue;">Right</div>
</div>
</div>解释：
- 与两栏布局类似，表格布局也可以轻松实现三栏布局，并且能够保持各栏的对齐。
- 表格布局适用于要求精确对齐的布局场景。
3. 绝对定位 (Position: Absolute)
通过 position: absolute; 和 float 可以实现两栏或三栏布局。该方法通常用于需要固定元素位置的场景。
两栏布局
html
<div class="relative-container" style="position: relative; height: 300px;">
<div class="left" style="position: absolute; left: 0; width: 50%; height: 100%; background-color: lightcoral;">Left</div>
<div class="right" style="position: absolute; right: 0; width: 50%; height: 100%; background-color: lightblue;">Right</div>
</div>解释：
- 父容器使用
position: relative;定位，子容器使用position: absolute;并分别定位在左侧和右侧。 - 这种方式可以实现固定的两栏布局，但对子容器的高度要求比较高，通常需要明确定义。
三栏布局
html
<div class="relative-container" style="position: relative; height: 300px;">
<div class="left" style="position: absolute; left: 0; width: 25%; height: 100%; background-color: lightcoral;">Left</div>
<div class="center" style="position: absolute; left: 25%; width: 50%; height: 100%; background-color: lightgreen;">Center</div>
<div class="right" style="position: absolute; right: 0; width: 25%; height: 100%; background-color: lightblue;">Right</div>
</div>解释：
- 三栏布局中，通过绝对定位分别设置左、中、右三栏的位置和宽度。
- 这种方式适用于需要严格控制布局中元素位置的场景，但在响应式设计中灵活性较差。
说说弹性盒子
基本概念
- 弹性盒子（Flexbox） 是一种 CSS 布局模型，旨在为用户界面提供一种更高效的方式来排列、对齐和分配容器内的空间，特别是在大小不一的元素之间分配空间时。
- 它使得在纵向和横向两个维度上对元素进行对齐和分布变得更加简单。
主要属性
display: flex/inline-flex：设置容器为弹性容器，并将其子元素转为弹性项目。flex-direction：定义弹性项目的排列方向（如row,row-reverse,column,column-reverse）。justify-content：定义弹性项目在主轴（横轴或纵轴）方向上的对齐方式（如flex-start,flex-end,center,space-between,space-around）。align-items：定义弹性项目在交叉轴方向上的对齐方式（如flex-start,flex-end,center,baseline,stretch）。flex-wrap：定义当弹性容器中的元素超出容器空间时是否换行（如nowrap,wrap,wrap-reverse）。align-content：控制多行弹性项目在交叉轴方向上的对齐方式（如flex-start,flex-end,center,space-between,space-around,stretch）。flex-grow,flex-shrink,flex-basis：分别控制弹性项目的扩展、收缩以及默认大小。
应用场景
- 适用于需要动态调整元素位置和大小的场景，如水平或垂直居中、等间距分布、响应式布局等。
- 创建简单而灵活的导航栏、按钮组、卡片布局、图像库等。