CSS 语法学习文档（十九）

|---------------------|-------------------------------------|----------------|-----------|
| 属性名称 | 常用值 | 一句人话功能 | 典型应用 |
| display | flex / inline-flex | 开启 Flex 布局模式 | 布局容器定义 |
| flex-direction | row / column | 决定主轴是横向还是纵向 | 垂直居中、左右排列 |
| justify-content | flex-start / center / space-between | 决定主轴上的元素对齐方式 | 两端对齐、水平居中 |
| align-items | stretch / center / baseline | 决定交叉轴上的元素对齐方式 | 垂直居中、卡片等高 |
| flex-wrap | nowrap / wrap | 决定元素是否换行 | 响应式换行排列 |
| align-content | center / space-between | 多行/多列时，决定整体的对齐 | 多行内容垂直居中 |

项目属性（写在子元素上）

|-----------------|---------------------|--------------------|-------------|
| 属性名称 | 常用值 | 一句人话功能 | 典型应用 |
| flex-grow | 0 / 1 / 数字 | "瓜分剩余空间"的能力 | 自适应宽度填充 |
| flex-shrink | 0 / 1 / 数字 | "空间不足时收缩"的程度 | 防止文字被挤压变形 |
| flex-basis | auto / px / % | 分配空间前的"基准大小" | 设定初始宽度 |
| flex | 0 1 auto / 1 1 auto | 上面三个属性的简写 | 推荐使用此简写 |
| align-self | auto / center | 覆盖父容器的 align-items | 单个元素特殊的垂直对齐 |

垂直水平居中

css 复制代码

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

左侧固定，右侧自适应

css 复制代码

.sidebar { flex: 0 0 200px; } /* 解释：不放大，不缩小，基准200px */

.main { flex: 1; }            /* 解释：占满剩余空间 */

两栏对齐，中间自适应（导航栏常用）

css 复制代码

.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

19.1.2 Grid 属性对照表

Grid 是二维布局的王者，能够同时处理行和列。

容器属性（写在父元素上）

|------------------------------------------------|----------------------------|--------------------|----------|
| 属性名称 | 常用值 | 一句人话功能 | 典型应用 |
| grid-template-columns | repeat(3, 1fr) / 100px 1fr | 定义每一列的宽度公式 | 复杂的响应式栅格 |
| grid-template-rows | auto / minmax(100px, auto) | 定义每一行的高度公式 | 页面整体骨架 |
| grid-template-areas | "header header" "nav main" | 用字符画直观地定义布局区域 | 宏观页面排版 |
| gap / row-gap / column-gap | 20px / 1rem | 网格之间的间距（取代 margin） | 统一栅格间距 |
| place-items | center | 垂直和水平居中的简写 | 单元格内容居中 |

项目属性（写在子元素上）

|-----------------|-----------------|--------------------------|-------------|
| 属性名称 | 常用值 | 一句人话功能 | 典型应用 |
| grid-column | 1 / 3 / span 2 | 指定元素占据哪几列 | 跨列布局（如通栏标题） |
| grid-row | 1 / -1 / span 2 | 指定元素占据哪几行 | 跨行布局（如侧边栏） |
| grid-area | header | 直接引用 template-areas 中的名字 | 快速定位元素区域 |

典型的圣杯布局（头尾 + 侧边 + 内容）

css 复制代码

.layout {

  display: grid;

  /* 解释：定义列宽（侧边栏固定，内容自适应），定义行高（头尾固定，内容自适应） */

  grid-template-columns: 250px 1fr;

  grid-template-rows: 60px 1fr 40px;

  grid-template-areas:

    "header header"

    "sidebar main"

    "footer footer";

  height: 100vh; /* 铺满屏幕 */

}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

19.1.3 背景与边框属性简写速查

这些属性虽基础，但简写顺序极其容易混淆，特别是 border-radius 和 background。

属性简写顺序表

|-------------------|---------------------------------------------------------|----------------|-----------------------------------------|
| 属性名称 | 简写顺序逻辑 | 一句人话 | 示例 |
| border | width style color | 粗细线型颜色 | 1px solid red |
| border-radius | TL TR BR BL (顺时针) | 左上右上右下左下 | 10px 20px 30px 40px |
| font | style weight size/line-height family | 字体粗细大小/行高字族 | italic bold 16px/1.5 Arial |
| background | color position size repeat origin clip attachment image | 色位大重原附图 | #fff url(bg.jpg) no-repeat center/cover |

1. border-radius 的简写技巧

css 复制代码

.box {

  /* 解释：只写两个值：左上/右下，右上/左下 (对角线关系) */

  border-radius: 10px 30px;

  /* 解释：斜杠语法：水平半径 / 垂直半径（可画椭圆） */

  border-radius: 50% / 10%;

}

2. background 的推荐写法

css 复制代码

.card {

  /* 解释：使用简写时，size 必须紧挨着 position，并用 / 分隔 */

  background: url('pic.jpg') center center / cover no-repeat;

  /* 解释：等价于：

       background-image: url('pic.jpg');

       background-position: center center;

       background-size: cover;

       background-repeat: no-repeat;

  */

}

19.2 概念词汇表

这些"黑话"是理解 CSS 渲染机制的基石。

搞懂它们，意味着真正理解了浏览器是如何画图的。

19.2.1 BFC、IFC、GFC、FFC 格式化上下文

想象每个 CSS 元素都生活在一个"隐形的盒子"里。

这个盒子有一套特殊的规则，决定了里面的元素怎么排列、外面的元素怎么干扰它。

这个"盒子+规则"就是格式化上下文（FC）。

BFC (Block Formatting Context)

块级格式化上下文。就像一个独立的"VIP 包厢"。包厢里的布局（比如浮动塌陷）不会影响外面，外面的也不会干扰里面。

IFC (Inline Formatting Context)

行内格式化上下文。就像文字行。文字如何 baseline 对齐、如何换行，都由 IFC 规则决定。

FFC (Flex Formatting Context)

Flex 弹性格式化上下文。给父元素设 display: flex 就创建了这个环境，专门管伸缩布局。

GFC (Grid Formatting Context)

Grid 网格格式化上下文。给父元素设 display: grid 就创建了，专门管网格布局。

BFC 触发条件速查表

|--------------|----------------------------|---------------------------|
| 触发方式 | 属性值示例 | 备注 |
| overflow | hidden / auto / scroll | 最常用的触发方式（慎用 visible 以外的值） |
| float | left / right | 只要浮动就会创建 BFC |
| position | absolute / fixed | 绝对定位也会创建 |
| display | flex / grid / inline-block | 现代 CSS 布局自然具备 BFC 特性 |
| display | flow-root | 推荐：专门为创建 BFC 而生，无副作用 |

问题：父容器高度塌陷（因为子元素浮动）

css 复制代码

.parent {

  border: 1px solid red;

  /* 子元素浮动后，父容器高度变成 0 */

}

解决方案1：经典清除浮动

css 复制代码

.parent::after {

  content: "";

  display: table;

  clear: both;

}

解决方案2：创建 BFC（现代推荐）

css 复制代码

.parent {

  display: flow-root; /* 解释：直接触发 BFC，包含浮动子元素，且无 overflow: hidden 的裁剪风险 */

}

19.2.2 视口、视窗、包含块

这些词定义了 CSS 的"坐标系"。

概念辨析表

|---------|------------------|-----------------------------------|-------------------------------------|
| 词汇 | 英文 | 核心定义 | 决定了什么 |
| 视口 | Viewport | 浏览器窗口中显示网页内容的区域（不含工具栏）。 | vh / vw 单位的大小。移动端布局的基准。 |
| 视窗 | Visual Viewport | 用户当前可见的屏幕区域（尤其在移动端缩放时）。 | 移动端交互体验。 |
| 包含块 | Containing Block | 参考点。元素的尺寸（百分比）和位置（绝对定位）是相对于谁来计算的？ | width: 50% 是谁的 50%？top: 0 是相对于谁顶部的？ |

视口就是画框。

包含块就是坐标系的原点。