前端常用css布局

1. 圣杯布局与双飞翼布局

场景：三栏布局，中间自适应宽度，两侧固定宽度。
核心特点：

• 圣杯布局：通过 float、负边距 (margin-left) 和相对定位实现，中间内容优先渲染。

• 双飞翼布局：在中间栏外层添加容器，通过 margin 避开两侧固定栏，避免内容遮挡。
  实现示例：

/* 圣杯布局 */
.parent {
  padding: 0 200px;  /* 左右栏宽度 */
  box-sizing: border-box;
}
.left, .right { width: 200px; }
.main { width: 100%; }

---

2. 水平垂直居中

场景：元素在父容器中居中。
实现方法：

• Flexbox：容器设置 display: flex + justify-content: center + align-items: center。

• Grid：容器设置 display: grid + place-items: center。

• 绝对定位：父容器相对定位，子元素通过 transform: translate(-50%, -50%) 居中。

示例：

/* Flexbox 实现 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

3. 响应式布局

场景：适配不同屏幕尺寸（如手机、平板、桌面）。
核心技巧：

• 媒体查询：根据屏幕宽度调整布局（如 @media (max-width: 768px)）。

• 流式布局：使用百分比或 fr 单位（Grid）代替固定宽度。

• 弹性图片：设置 max-width: 100% 防止图片溢出。

示例：

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}

---

4. 等高布局

场景：多列内容高度保持一致。
实现方法：

• Flexbox：容器设置 display: flex，子项默认 align-items: stretch（等高）。

• Grid：容器设置 display: grid，子项自动填充行高。

示例：

.flex-container {
  display: flex;
  align-items: stretch;
}

---

5. 页脚紧贴底部（Sticky Footer）

场景：内容不足一屏时，页脚固定在底部；内容超出一屏时自动下推。
实现方法：

• Flexbox：父容器设为 display: flex + flex-direction: column，主内容区域设置 flex: 1。

• Grid：父容器设置 grid-template-rows: auto 1fr auto。

示例：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

---

6. 多列自适应布局

场景：两栏或三栏布局（如侧边栏+主内容）。
实现方法：

• Float + Margin：侧边栏浮动，主内容通过 margin 避开浮动元素。

• Flexbox：容器设置 display: flex，侧边栏固定宽度，主内容 flex: 1。

• Grid：定义列宽（如 grid-template-columns: 200px 1fr）。

示例：

/* Grid 实现两栏布局 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

---

7. BFC 解决布局问题

场景：处理外边距塌陷、清除浮动、阻止元素被浮动覆盖。
实现方法：

• 触发 BFC：设置 overflow: hidden、display: flow-root 等。
  示例：

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

---

8. 复杂布局工具：Grid 与 Flexbox

场景：现代网页的复杂布局需求（如卡片流、不规则排列）。

• Grid：适合二维布局（行+列），支持 grid-template-areas 定义区域。

• Flexbox：适合一维布局（行或列），灵活控制子项对齐方式。

Grid 示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

---

扩展技巧

1. CSS 变量：定义全局样式变量（如主题色），提升代码可维护性。

2. 动画与过渡：通过 @keyframes 和 transition 增强交互体验。

3. 自定义字体：使用 @font-face 引入个性化字体