CSS布局技巧主要包括使用Flexbox和Grid两种强大的布局技术。它们能够使前端开发者更轻松地实现复杂的网页布局，适应不同的屏幕尺寸和设备。以下是它们的简要介绍：
- Flexbox（弹性盒子布局）：
Flexbox是一种一维布局模型，通过在容器元素上设置display: flex，将其内部元素排列为一行（默认）或一列。Flexbox通过容器和子元素之间的属性设置来实现灵活的布局。
主要属性：
-
flex-direction：设置主轴的方向，可为row（水平方向，默认）、column（垂直方向）、row-reverse和column-reverse。 -
justify-content：定义了子元素在主轴上的对齐方式，如flex-start、flex-end、center、space-between、space-around等。 -
align-items：定义了子元素在交叉轴上的对齐方式，如flex-start、flex-end、center、baseline、stretch等。 -
flex：用来设置子元素的扩展比例，决定了子元素在父容器中所占的比例。
- Grid（网格布局）：
Grid是一种二维布局模型，通过在容器元素上设置display: grid，将其内部元素排列成网格。Grid布局具有非常强大的网格控制能力，可以定义行、列、单元格的大小和位置。
主要属性：
-
grid-template-columns：定义网格的列大小和列数。 -
grid-template-rows：定义网格的行大小和行数。 -
grid-column和grid-row：用来设置子元素的起始和结束位置，可以将子元素合并为网格单元。 -
grid-gap：定义网格行和列之间的间隙。
Flexbox和Grid可以分别用于不同的场景，但也可以结合使用。它们的出现极大地简化了网页布局的实现，减少了对传统布局方法（如浮动和定位）的依赖。使用这些布局技巧，可以轻松地实现响应式布局、复杂的网格结构以及灵活的页面排版。同时，它们也支持现代浏览器，使得我们可以更好地满足不同设备和屏幕尺寸的要求。
