layout布局

在网页设计和前端开发中，"布局"（Layout）指的是安排页面元素（如文本、图片、按钮等）在页面上的位置和结构。以下是常见布局技术的中文详解：

1. 传统布局方法

文档流（Normal Flow）
默认布局方式，元素按HTML顺序从上到下、从左到右排列（块级元素独占一行，行内元素共享一行）。
浮动（Float）
通过 float: left/right 使元素脱离文档流，常用于图文环绕或多列布局（需用 clearfix 清除浮动）。
定位（Positioning）
- position: relative（相对定位）：基于自身原始位置偏移
- position: absolute（绝对定位）：基于最近的定位祖先元素
- position: fixed（固定定位）：相对于浏览器视口
- position: sticky（粘性定位）：滚动到阈值时固定

2. 现代布局方案

(1) Flex 弹性布局

通过 display: flex 将容器转为弹性盒子，适合一维布局（行或列）。
核心属性：

容器属性：

justify-content: center; /* 主轴对齐（水平） */
align-items: center;     /* 交叉轴对齐（垂直） */
flex-direction: row;     /* 排列方向（行/列） */
flex-wrap: wrap;         /* 是否换行 */

子项属性：

flex: 1;               /* 自适应比例 */
align-self: flex-end;  /* 单独控制子项对齐 */

(2) Grid 网格布局

通过 display: grid 创建二维网格，适合复杂布局（行+列同时控制）。
核心属性：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 列宽比例 */
  grid-template-rows: 100px auto;     /* 行高 */
  gap: 10px;                          /* 间距 */
}
.item {
  grid-column: 1 / 3; /* 跨越第1到第3列 */
  grid-row: 1;        /* 位于第1行 */
}

3. 响应式布局（Responsive Layout）

媒体查询（Media Queries）
根据屏幕尺寸应用不同样式：
```
@media (max-width: 768px) {
.container { flex-direction: column; }
}
```
流动布局（Fluid Layout）
使用百分比（width: 100%）、vw/vh 单位替代固定像素，使元素随窗口缩放。
自适应单位
- rem：基于根字体大小（适配不同设备）
- min-width/max-width：限制元素最小/最大尺寸

4. 经典布局实现示例

圣杯布局 / 双飞翼布局

目标：三栏布局（两侧固定宽度，中间自适应）
Flex 实现：

.container {
  display: flex;
}
.left, .right {
  width: 200px; /* 固定宽度 */
}
.center {
  flex: 1;     /* 自动填满剩余空间 */
}

水平垂直居中

/* Flex 方案 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid 方案 */
.container {
  display: grid;
  place-items: center;
}