Cris Wiki

切换主题

CSS属性 ​

字体&文本 ​

字体属性 ​

属性说明
font-family指定字体族（如 'Arial', '微软雅黑', serif, sans-serif 等）
font-size设置字体大小（如 16px, 1.2em, 100% 等）
font-weight设置字体粗细（如 normal, bold, 400, 700 等）
font-style设置字体风格（如 normal, italic, oblique）
font-variant设置小型大写字母（如 normal, small-caps）
font-stretch设置字体宽窄（较少使用，如 condensed, expanded）
line-height设置行高（影响文本垂直间距，如 1.5, 24px）
  • font 是个简写属性，可同时设置多个字体属性（顺序：[font-style] [font-variant] [font-weight] font-size[/line-height] font-family），其中font-size和font-family是必填项，其他项可选。
  • line-height 需要放到font后面，否则会被font重新覆盖成默认值。或者直接将line-height写在font属性里面

文本属性 ​

属性说明
color设置文本颜色（如 #333, rgb(0,0,0), red）
text-align设置文本水平对齐方式（如 left, center, right, justify）
text-decoration设置文本装饰线（如下划线、删除线等，如 none, underline, line-through）
text-transform控制字母大小写（如 uppercase, lowercase, capitalize）
text-indent设置首行缩进（如 2em）
letter-spacing设置字符间距（如 1px, -0.5px）
word-spacing设置单词间距（对空格分隔的单词有效）
white-space控制空白符处理（如 normal, nowrap, pre, pre-wrap）
text-overflow设置溢出文本的显示方式（常配合 overflow 和 white-space: nowrap 使用，如 ellipsis）
word-break / word-wrap（现为 overflow-wrap）控制单词换行行为（如 break-all, keep-all, normal）
text-shadow设置文本阴影（如 2px 2px 4px rgba(0,0,0,0.5)）
direction设置文本方向（如 ltr, rtl）

自定义字体 ​

@font-face 是 CSS 中用于自定义字体的关键规则，允许开发者加载并使用用户设备上未安装的字体文件，从而实现更丰富的网页排版效果。

css
@font-face {
  font-family: "MyCustomFont"; /* 自定义字体名称（任意命名） */
  src:
    url("fonts/myfont.woff2") format("woff2"),
    url("fonts/myfont.woff") format("woff"); /* 字体文件路径 + 格式 */
  font-weight: normal; /* 字重（如 400, bold, 700 等） */
  font-style: normal; /* 字体样式（normal / italic） */
  font-display: swap; /* 可选：控制字体加载期间的显示行为 */
}

文档流 ​

文档流是浏览器默认的HTML元素布局方式。在正常文档流中：

  • 块级元素（如 div, p, h1）：
    • 独占一行，垂直方向依次排列；
    • 宽度默认为父容器的 100%，高度由内容撑开。
  • 行内元素（如 span, a, strong）：
    • 在一行内水平排列，不会换行（除非空间不足）；
    • 宽高由内容决定，设置 width/height 无效；
    • 上下 margin/padding 不影响其他元素（但自身视觉有变化）。

📌 脱离文档流：当元素使用 position: absolute/fixed 或 float 时，会脱离正常文档流，不再占据原来的空间，可能影响其他元素布局。

display & visibility ​

属性值是否占据空间是否渲染子元素是否可见
displaynone❌ 不占据❌ 不渲染——
visibilityhidden✅ 占据✅ 渲染（但不可见）默认继承为 hidden

display

将一个内联元素变成块元素，通过 display 样式可以修改元素的类型。

可选值：

  • inline：可以将一个元素作为内联元素显示
  • block：可以将一个元素设置为块元素显示
  • inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点，又具有块元素的特点，既可以设置宽高，又不会独占一行。
  • none：不显示元素，并且元素不会在页面中继续占有位置
  • flex/grid：将元素设置为弹性布局或网格布局

visibility

  • 可以用来设置元素的隐藏和显示的状态
  • 可选值：
    • visible：默认值，元素默认会在页面显示
    • hidden：元素会隐藏不显示

使用 visibility: hidden; 隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持。子元素默认是存在于父元素的内容区中。
理论上讲，子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示。

通过 overflow 可以设置父元素如何处理溢出内容：

可选值：
visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden：溢出的内容会被修剪，不会显示
scroll：会为父元素添加滚动条，通过拖动滚动条来查看完整内容。该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
auto：会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就不加

浮动float ​

  1. 基本特性:
    • 元素脱离正常文档流，向左（float: left）或右（float: right）移动，直到碰到包含块或另一个浮动元素。
    • 行内元素设置 float 后，会表现得像 inline-block（可设宽高）。
    • 浮动元素仍占据文档空间（影响后续行内内容），但块级兄弟元素会“无视”它（可能被覆盖）。

⚠️ 注意

  • 浮动会导致父容器高度塌陷；
  • 多个浮动元素会紧密排列，若总宽度超父容器则换行；
  • 使用 clear: left/right/both 可阻止元素与浮动元素同行。

⚠️ 现代替代方案：优先使用 display: flex 或 grid 布局，避免 float 的副作用。

高度塌陷 ​

高度塌陷: 当父容器未设置高度，且所有子元素都浮动时，父容器无法被子元素撑开，高度变为 0，导致背景、边框等样式失效。

  • 解决方案：
    1. BFC（Block Formatting Context）法：父元素开启 BFC，使其能包含浮动子元素。
    2. 伪元素清除法（推荐，兼容性好）：伪元素组合clear: both。
      css
      .clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
    3. 额外标签法（不推荐，污染 HTML）：在浮动元素后添加一个空标签（如 <div style="clear: both;"></div>），触发父容器高度塌陷问题的修复。

BFC ​

  • BFC 是一个独立的“盒子”环境，浏览器在这个环境中按照特定规则排布块级元素。
  • 处于 BFC 中的元素：
    • 垂直方向依次排列（从上到下）；
    • 相邻块级元素的垂直 margin 会发生合并（但不同 BFC 之间不会）；
    • 不会与浮动元素重叠；
    • 能包含浮动子元素（解决高度塌陷）。

✅ 简单说：BFC 就像一个“隔离舱”，内部自成一体，内外互不干扰。

开启BFC方式说明
float 不为 none如 float: left
position 为 absolute 或 fixed脱离文档流
display 为 inline-block / table-cell / table-caption / flex / grid / flow-root常用方案
overflow 不为 visible如 overflow: hidden / auto（最常用）
contain 为 layout / content / paint新特性

💡 现代最佳实践：使用 display: flow-root —— 专为创建 BFC 设计，无副作用。

盒模型 ​

简述 ​

CSS 盒子模型（Box Model）是 CSS 布局的核心基础，理解它对掌握页面排版、尺寸计算和元素定位至关重要。

+----------------------------+
|         margin             |
|  +----------------------+  |
|  |       border         |  |
|  |  +----------------+  |  |
|  |  |    padding     |  |  |
|  |  |  +----------+  |  |  |
|  |  |  | content  |  |  |  |
|  |  |  +----------+  |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+----------------------------+

在 CSS 中，每个 HTML 元素都被视为一个矩形盒子，由以下四部分组成（从内到外）：

部分说明
content实际内容区域（如文本、图片），由 width / height 控制
padding内边距，内容与边框之间的空间（透明，受背景色影响）
border边框，围绕 padding 和 content
margin外边距，控制与其他元素的距离（透明，不占背景）

📌 总宽度公式（默认情况下）：
总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
（高度同理）

两种盒模型 box-sizing ​

标准盒模型 — 默认 ​

  • width / height 仅指 content 区域。
  • padding、border 会额外增加元素总尺寸。
css
.box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
}
/* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */

IE盒模型 ​

  • width / height 包含 content + padding + border。
  • padding 和 border 不会撑大元素总尺寸。
css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
}
/* 实际占用宽度 = 200px（padding 和 border 向内挤压 content） */

盒模型相关属性 ​

属性说明常用值
width / height内容区尺寸（受 box-sizing 影响）auto, px, %, em, max-content 等
min-width / max-width最小/最大宽度（常用于响应式）300px, 100%
min-height / max-height最小/最大高度200px, 100vh
padding内边距（4 个方向）10px, 1em 2em, 5%
border边框（宽度+样式+颜色）1px solid #ccc, 2px dashed red
margin外边距（可为负值）10px, auto, -5px
box-sizing盒模型类型content-box（默认）, border-box

内外边距、边框都可分方向设置

padding、border、margin 都可以设置多个值，分别对应上、右、下、左（顺时针）。
例如：

css
/* 外边距（4 个方向） */
margin: 10px; /* 上下左右 10px */
margin: 10px 20px; /* 上下 10px，左右 20px */
margin: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

/* 或者分别设置上、右、下、左 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
属性作用区域是否影响背景能否为负
padding内容 ↔ 边框之间受 background 影响（背景会延伸到 padding 区）不能
border围绕 padding 和 content边框本身有样式，背景不覆盖 border（除非设置 background-clip）不能
margin元素 ↔ 其他元素之间透明，不受背景影响能

border ​

border 属性是一个简写属性，用于设置元素的边框宽度、样式和颜色。

属性常用值
border-width1px, 2px
border-stylesolid, dashed, dotted
border-color#000, red, rgb(255,0,0)
css
border: 1px solid #ccc;
border-top: 2px dashed red;
style可选值说明示例效果
none无（默认）完全透明，不占空间（宽度为 0）
solid实线边框————————
dashed虚线（长划线）- - - - - -
dotted点线（圆点）··········
double双线边框＝＝＝＝＝＝

border-radius ​

border-radius 实现边框圆角。
border-radius 可以接受 1 到 4 个值，以及 / 分隔的两个方向（水平/垂直）半径。其顺序遵循“顺时针”原则。

数量含义
1 个值四个角都使用相同的圆角半径（如：10px）
2 个值第一个控制左上/右下角，第二个控制右上/左下角（如：10px 20px）
3 个值左上 → 右上/左下 → 右下（如：10px 20px 30px）
4 个值按顺时针依次设置：左上、右上、右下、左下（如：10px 20px 30px 40px）
  • 使用 / 设置水平与垂直半径（椭圆弧）。前一个值：控制水平方向（x 轴）的半径；后一个值：控制垂直方向（y 轴）的半径
css
border-radius: 100px / 50px;
  • 单独设置某个角点的圆角，可以使用以下独立属性来精确控制每个角：
css
// 圆角
border-top-right-radius: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
// 椭圆角
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px;

⚠️ 注意

格式：水平半径 垂直半径（顺序不可颠倒）

box-shadow ​

边框阴影 box-shadow

css
box-shadow: h v blur spread color inset;
/* h：水平方向的偏移值（必填）, 正值向右，负值向左 */
/* v：垂直方向的偏移值（必填）, 正值向下，负值向上 */
/* blur：模糊半径（可选，默认为 0）, 值越大，阴影越模糊 */
/* spread：阴影的尺寸，扩展或收缩阴影大小（可选，默认为 0）, 正值扩大阴影范围，负值缩小阴影范围 */
/* color：阴影颜色（可选，默认为黑色） */
/* inset: 内阴影（可选，默认是外阴影） */

/* 外阴影：向右下偏移，模糊，扩展，红色 */
box-shadow: 10px 10px 5px 2px red;
/* 内阴影：向内偏移，不模糊，蓝色 */
box-shadow: inset 0 0 5px blue;

/* 多重阴影： */
box-shadow:
  2px 2px 4px rgba(0, 0, 0, 0.3),
  4px 4px 8px rgba(0, 0, 0, 0.5);

💡 提示：box-shadow 和 text-shadow 的语法结构一致，都支持多重阴影。

border-image ​

边框图片 border-image

css
border-image-source: url("./images/border1.png"); /* 默认只填充容器四个角点 */
border-image-slice: 27 fill; /* 设置四个方向上的裁切距离，fill 表示内部填充 */
/* border-image-slice 可设置一个值（四边相同），或多个值：
    - 27 10：左右 27，上下 10
    - 27 20 15 5 fill：左 27，下 20，右 15，上 5，并填充内部 */
border-image-width: 27px; /* 边框图片宽度，未设置时默认为元素原始边框宽度 */
border-image-outset: 0px; /* 扩展边框，但会影响元素大小，box-sizing 不可挽回，建议不使用 */
border-image-repeat: stretch; /* 图片重复方式 */
/* border-image-repeat 可选值：
   - stretch：拉伸（默认）
   - repeat：重复
   - round：重复，且最后一个片段会自动缩放以填充剩余空间 */

/* 简写 */
border-image: source slice / width / outset repeat;
border-image: url("./images/border1.png") 27 / 27px / 0px stretch;

margin ​

css
margin: 20px;
margin: 0 auto; /* 水平居中（块级元素需指定 width） */
margin-left: auto;
margin-right: auto; /* 等效 */

关键特性：

  1. 可为负值：常用于“拉近”元素。
  2. 外边距合并（Margin Collapse）：
    • 相邻块级元素的垂直 margin 会合并（取最大值，非相加）。
    • 父子元素之间也可能合并（父无 border/padding 时）。
  3. margin: auto 的妙用：
    • 在 Flex/Grid 容器中：可实现任意方向居中。
    • 在普通块级元素中：仅水平居中有效（需固定宽度）。

定位 ​

position ​

值，全称脱离文档流定位参考点常见用途
static，静态定位否——默认值，无法使用 top/left 等偏移
relative，相对定位否自身原始位置微调位置、作为绝对定位的“容器”
absolute，绝对定位是最近的非static定位祖先元素（若无，则为 <html>）弹窗、 tooltip、图标定位
fixed，固定定位是视口（viewport）导航栏、回到顶部按钮
sticky，粘性定位混合最近的滚动祖先 + 自身位置表头固定、侧边目录

⚠️ 注意

top / right / bottom / left 用于微调元素位置，需配合 position 定位使用。

z-index ​

z-index 是 CSS 中用于控制元素在 Z 轴（垂直于屏幕方向）上的堆叠顺序的属性。它决定了当多个元素发生重叠时，谁显示在上层、谁被遮挡。

  • 仅对定位元素生效：position 的值必须是 relative、absolute、fixed 或 sticky（不能是默认的 static）。
  • 若未设置 z-index，默认为 auto（相当于 0，但行为略有不同）。
值类型说明
正整数（如 1, 999）数值越大，越靠前（顶层）
负整数（如 -1）可置于背景层之下（需父容器允许）
auto默认值，不创建新的层叠上下文，继承父级堆叠顺序

层叠顺序 ​

位置元素类型
7. 最顶层z-index > 0
6.z-index: auto / z-index: 0
5.inline/inline-block水平盒子
4.float浮动盒子
3.block块级水平盒子
2.z-index < 0
1. 最底层background / border

背景 ​

background ​

css
background: [background-color] [background-image] [background-repeat]
  [background-attachment] [background-position] / [background-size]
  [background-origin] [background-clip];
子属性说明
background-color背景颜色，默认transparent
background-image背景图片（可为 url() 或 none），默认none
background-repeat图片重复方式（如 repeat, no-repeat, repeat-x, repeat-y），默认repeat
background-attachment背景是否随页面滚动（scroll, fixed, local），默认scroll
background-position背景图片起始位置（如 center, top left, 50% 50%，默认0% 0%（即左上角）
background-size背景图片尺寸（如 auto, cover, contain, 100px 200px），默认auto auto
background-origin背景绘制起点（border-box, padding-box, content-box），默认padding-box
background-clip背景绘制区域（border-box, padding-box, content-box, text），默认border-box

⚠️ 注意

  1. background-size 必须紧跟在 background-position 后面，并用 / 分隔。
  2. background-origin 和 background-clip 不能直接在标准 background 简写中使用（某些浏览器可能支持，但不推荐）。建议单独声明。
  3. 如果同时设置 background-color 和 background-image，颜色会作为图片的底层显示（当图片透明或未覆盖全部区域时可见）。
  4. 使用简写属性时，未指定的子属性会被重置为默认值，这可能导致意外覆盖。

背景渐变 ​

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient() / repeating-radial-gradient()

线性渐变 ​

语法：
background: linear-gradient(direction, color1, color2...color3);

参数说明：

  • direction：表示线性渐变的方向，

    • to left：设置渐变为从右到左。相当于：270deg；
    • to right：设置渐变从左到右。相当于：90deg；
    • to top：设置渐变从下到上。相当于：0deg；
    • to bottom：设置渐变从上到下。相当于：180deg。这是默认值。
    • 45deg：45度方向渐变。

  • color1：起点颜色。

  • color2：过渡颜色，指定过渡颜色的位置。

  • color3：结束颜色。你还可以在后面添加更多的过渡颜色和位置，表示多种颜色的渐变。

示例：
background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

径向渐变 ​

语法：
background: radial-gradient(shape size at position, start-color, ..., color..., last-color);

参数说明：

  • shape：渐变的形状。

    • ellipse：表示椭圆形；
    • circle：表示圆形。默认为 ellipse；
    • 如果元素宽高相同为正方形，则 ellipse 和 circle 显示一样；
    • 如果元素宽高不相同，默认效果为 ellipse。

  • size：渐变的大小，即渐变到哪里停止。它有四个值：

    • closest-side：最近边；
    • farthest-side：最远边；
    • closest-corner：最近角；
    • farthest-corner：最远角。默认是 最远角。

  • at position：渐变的中心位置。比如：

    • at top left：中心为元素左上角位置；
    • at center center：中心为元素中心位置；
    • at 5px 10px：中心为偏移元素左上角位置右边 5px，下边 10px 位置。

  • start-color：起始颜色；

  • color：渐变颜色，可选起始位置 stop；

  • last-color：结束颜色。

示例：
background: radial-gradient(circle farthest-side at right top, red, yellow 50%, blue);

重复渐变 ​

  • repeating-linear-gradient()：重复线性渐变
  • repeating-radial-gradient()：重复径向渐变

它们的行为与普通渐变类似，但只要颜色停止点的范围有限，就会自动平铺重复。

  1. 必须指定位置
    ❌ 错误（不会重复）：

    css
    background: repeating-linear-gradient(
  red,
  blue
); /* 无位置，等同于普通渐变 */

    ✅ 正确：

    css
    background: repeating-linear-gradient(red 0px, blue 10px);

  2. 颜色停止点顺序决定重复单元
    从第一个到最后一个 stop 构成一个“图案单元”，然后重复。

CSS动效 ​

过渡（Transition） ​

transition 是 CSS 中用于在元素状态变化时创建平滑动画效果的属性。比如鼠标悬停（:hover）、聚焦（:focus）或类名切换时，让颜色、大小、位置等属性的变化不是突变，而是渐变过渡。

基本语法：

css
selector {
  transition: property duration timing-function delay;
}

/* 也可以分开写： */
selector {
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s;
}
属性说明常用值
transition-property要过渡的 CSS 属性all, width, background-color, opacity 等
transition-duration过渡持续时间（必须设置，否则无效果）0.3s, 500ms
transition-timing-function过渡的速度曲线ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...)
transition-delay延迟多久开始过渡0s, 0.2s

💡 最常用的是简写：

css
transition: all 0.3s ease;

变形（Transform） ​

CSS transform 是一个非常强大的属性，用于对元素进行 2D 或 3D 空间变换，比如移动、旋转、缩放、倾斜等，而不会影响文档流（即不会推挤其他元素），性能也很好（尤其配合 transition 或 animation 使用时）。

基本语法：

css
selector {
  transform: <transform-function> [<transform-function>] *;
}

可以连续使用多个变换函数，从左到右依次应用（注意顺序会影响结果！）。

2D变换 ​

函数说明示例
translate(x, y)平移（移动）transform: translate(50px, 20px);
translateX(x) / translateY(y)单方向平移transform: translateX(100px);
scale(sx, sy)缩放（1 = 原大小）transform: scale(1.2);
scaleX(sx) / scaleY(sy)单方向缩放transform: scaleY(0.5);
rotate(angle)旋转（角度）transform: rotate(45deg);
skew(ax, ay)倾斜（剪切）transform: skew(10deg, 5deg);
skewX(ax) / skewY(ay)单方向倾斜transform: skewX(20deg);

3D变换 ​

函数说明
translate3d(x, y, z)3D 平移
scale3d(sx, sy, sz)3D 缩放
rotateX(angle), rotateY(angle), rotateZ(angle)绕 X/Y/Z 轴旋转
perspective(n)设置 3D 透视（通常用在父容器上）

⚠️ 注意

使用 3D 变换时，建议加上：

css
transform-style: preserve-3d; /* 子元素保留 3D 空间 */
perspective: 800px; /* 父容器设置透视 */

transform注意事项 ​

  1. transform 不会脱离文档流，但视觉位置会变，不影响其他元素布局。

  2. 默认变换原点是元素中心（transform-origin: center），可修改：

    css
    transform-origin: top left; /* 从左上角旋转/缩放 */

  3. 与 transition 或 animation 搭配效果最佳。

  4. 避免对 width/height/left/top 做动画，优先用 transform（性能更高，不会触发重排）。

  5. transform 和 opacity 是仅触发合成（composite） 的属性，不会引起 layout（重排）或 paint（重绘），因此动画更流畅，适合做高性能交互动画。

动画（Animation） ​

一个动画至少需要两个属性：

  • animation-name：动画的名字（创建动画时起的名字，如下为 moveTest）
  • animation-duration：动画的耗时
css
animation-name: moveTest;
animation-duration: 2s;

如需在 CSS3 中创建动画，需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

使用 @keyframes 关键字来创建动画。

css
@keyframes moveTest {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translateY(200px);
  }
  100% {
    transform: translate(200px, 200px);
  }
}

其中，百分比是指整个动画耗时的百分比。

  • 0%：动画起始位置，也可以写成 from
  • 100%：动画终点位置，也可以写成 to

动画的其他属性 ​

  1. animation-iteration-count：设置动画的播放次数，默认为 1 次。可以指定具体的数值，也可以指定 infinite（无限次）

  2. animation-direction：设置交替动画，默认值为 normal，可以设置为 alternate 来回交替

  3. animation-delay：设置动画的延迟，例如 2s

  4. animation-fill-mode：设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态。可以设置为 forwards 或 backwards 或 both。

  5. animation-timing-function：动画的时间函数（动画的效果，平滑、先快后慢等），默认值为 ease。动画的时间函数：linear, ease...

  6. animation-play-state：设置动画的播放状态，默认值为 running，可以设置为 paused 暂停动画

布局 ​

flex ​

  • 替代传统 float + position 的复杂布局方式。
  • 父容器设为 display: flex; 后，其直接子元素成为“伸缩项”（flex items），默认横向排列。

父容器属性 ​

  1. justify-content（主轴对齐）

控制子元素在主轴（默认水平方向）上的对齐方式：

  • flex-start：靠左（默认）
  • flex-end：靠右
  • center：居中
  • space-between：两端对齐，中间等间距
  • space-around：每个子元素两侧等间距（元素间间距 = 2 × 边缘间距）
  1. align-items（侧轴对齐）

控制子元素在侧轴（默认垂直方向）上的对齐：

  • flex-start：顶部对齐
  • flex-end：底部对齐
  • center：垂直居中
  • stretch：拉伸填满（默认，前提是子元素未设高度）
  • baseline：按文本基线对齐
  1. flex-flow（简写属性）

是 flex-direction + flex-wrap 的简写，默认值：row nowrap

  • flex-wrap：是否换行
    • nowrap（默认）：不换行，压缩子元素
    • wrap：换行（从上到下）
    • wrap-reverse：反向换行（从下到上）
  • flex-direction：主轴方向
    • row：水平从左到右（默认）
    • row-reverse：水平从右到左
    • column：垂直从上到下
    • column-reverse：垂直从下到上

子元素属性 ​

  1. align-self

单独覆盖 align-items，为单个子元素设置侧轴对齐方式（值同 align-items）。

  1. flex（核心属性，简写）

语法：flex: [grow] [shrink] [basis]

  • flex-grow（扩展比例，默认 0）
    占据剩余空间的比例。例如：两个子元素 flex-grow: 1 和 2，则按 1:2 分配剩余空间。

  • flex-shrink（收缩比例，默认 1）
    当空间不足时，按比例缩小。设为 0 则不收缩（可能溢出）。

  • flex-basis：设定初始主轴尺寸（如 100px, auto 等）

grid ​

  • 定位：专为二维布局（行 + 列）设计的布局系统，适合构建复杂页面结构（如仪表盘、相册、整体页面框架）。
  • 启用方式：在父容器设置 display: grid 或 display: inline-grid，其直接子元素自动成为“网格项”（grid items）。

父容器属性（Grid Container） ​

1. 定义网格轨道（Tracks）

属性说明示例
grid-template-columns定义列的宽度grid-template-columns: 100px 1fr 2fr;
grid-template-rows定义行的高度grid-template-rows: auto 100px;
grid-template-areas通过命名区域布局见下文示例

单位说明：

  • fr：弹性单位（剩余空间比例），如 1fr 2fr 表示 1:2 分配剩余空间
  • auto：根据内容自适应
  • minmax(min, max)：设定轨道尺寸范围，如 minmax(100px, 1fr)
  • repeat()：简化重复值，如 repeat(3, 1fr) = 1fr 1fr 1fr

2. 间距与对齐

属性说明
gap / row-gap / column-gap设置行/列间隙（替代 grid-row-gap 等旧属性）
justify-items所有网格项在行轴（水平）上的对齐方式
align-items所有网格项在列轴（垂直）上的对齐方式
justify-content整个网格在容器中的水平对齐（当网格总宽 < 容器宽时生效）
align-content整个网格在容器中的垂直对齐（当网格总高 < 容器高时生效）

⚠️ 注意

  • justify-items/align-items 作用于单个网格项
  • justify-content/align-content 作用于整个网格

3. 自动填充轨道

  • grid-auto-columns / grid-auto-rows：定义隐式创建的轨道尺寸（当网格项超出显式定义的网格时）
  • grid-auto-flow：控制自动放置规则
    • row（默认）：逐行填充
    • column：逐列填充
    • dense：尝试填充空白（可能导致顺序错乱）

子元素属性（Grid Items） ​

1. 定位与跨度

属性说明示例
grid-column-start / grid-column-end指定列起止线grid-column: 2 / 4;（从第2线到第4线，跨2列）
grid-row-start / grid-row-end指定行起止线grid-row: 1 / span 2;（从第1线开始跨2行）
简写grid-column / grid-rowgrid-column: 1 / -1;（占满整行）

🔢 线编号规则：

  • 从 1 开始，-1 表示最后一根线
  • 跨度可用 span N（如 span 2 表示跨2轨道）

2. 区域命名（推荐！）

css
/* 父容器 */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr;
}

/* 子元素 */
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

3. 单项对齐（覆盖父容器设置）

  • justify-self：单个网格项在行轴对齐
  • align-self：单个网格项在列轴对齐
    （值同 justify-items/align-items，如 start, center, stretch）

多列布局（Multi-column Layout） ​

用途：
模拟报纸排版，将长段文本分成多列显示，提升可读性，尤其适用于大屏设备。

常用属性：

属性说明
column-count设置列的数量
column-width设置每列的理想宽度
column-gap设置列与列之间的间距
column-rule设置列之间的分隔线（宽度、样式、颜色）
column-span设置元素跨越的列数（1 或 all）
max-height可限制列容器高度；内容会从左到右、从上到下依次填充各列

重要规则（“取大优先”原则）：

  • 当同时设置 column-count 和 column-width 时，则优先保证列数，浏览器会自动计算列宽。
  • 若手动设置的 column-width > 自动计算值 → 以手动设置为准。
  • 若手动设置的 column-width < 自动计算值 → 以自动计算值为准。
  • 若列宽总和小于容器宽度，实际列宽可能被拉大以填满容器。

附录 ​

附1：不换行展示省略号（单行 & 多行） ​

css
/* 单行 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行（例如 2 行） */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Released under the MIT License.

Copyright © 2026-present HelloCris