李瑞豪

2025-06-18 10:35:47

在现代前端开发中，CSS 的样式管理一直是一个令人头疼的问题。随着项目的不断扩展，样式规则的冲突、覆盖以及维护成本的增加，都给开发者带来了巨大的挑战。幸运的是，CSS 的 @layer 规则为我们提供了一种全新的解决方案，帮助我们更好地管理样式层级，提升代码的可维护性和可读性。本文将深入探讨 @layer 的背景、作用以及语法，带你一探究竟。

1 @layer 的背景

在 CSS 的发展历程中，样式的优先级规则一直是核心概念之一。默认情况下，CSS 样式按照选择器的优先级（如内联样式 > ID 选择器 > 类选择器 > 元素选择器）以及代码的书写顺序来决定最终的样式效果。然而，这种简单的优先级规则在大型项目中常常会引发问题：

1. 样式冲突：多个样式规则可能同时作用于同一个元素，导致样式冲突，开发者需要不断调整选择器的优先级来解决问题。
2. 维护困难：随着项目的复杂度增加，样式文件变得庞大且难以维护。开发者很难快速定位和修改特定的样式规则。
3. 组件化开发的挑战：在组件化开发中，不同组件的样式可能会相互干扰，导致样式管理混乱。

为了解决这些问题，CSS 工作组引入了 @layer 规则。@layer 允许开发者显式地定义样式的层级关系，从而更好地组织和管理样式规则。

2 @layer 的作用

2.1 定义样式层级

@layer 的核心作用是允许开发者显式地定义样式的层级关系。通过将样式规则分层，我们可以明确地控制样式的优先级顺序。例如，我们可以将基础样式定义在较低的层级，而将特定组件的样式定义在较高的层级，从而避免样式冲突。

1
2
3
4
5
6
7

@layer base {
 body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 }
}

2.2 提升代码可维护性

使用 @layer 可以让样式文件的结构更加清晰。开发者可以按照功能或模块将样式规则分层，便于后续的修改和扩展。同时，分层的样式规则也更容易被团队成员理解和协作。

2.3 支持组件化开发

在组件化开发中，@layer 可以帮助我们更好地隔离组件的样式。每个组件可以定义自己的样式层级，从而避免组件之间的样式相互干扰。这大大提升了组件的复用性和可维护性。

例如：

1
2
3
4
5
6
7
8
9

@layer components {
 .cell-button {
 background-color: blue;
 color: white;
 padding: 10px;
 border: none;
 cursor: pointer;
 }
}

在业务代码中，我们可以无视组件 CSS 的优先级，直接进行重置：

1
2
3

.cell-button {
 background-color: red; /* 覆盖组件样式 */
}

眼见为实：

可以理解为 @layer 定义的层级会整体下降一个优先级，这样便于分开业务代码和组件代码的样式管理。

3 @layer 的语法

3.1 基本语法

1
2
3

@layer layer-name? {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;

简而言之，@layer 规则可以用来定义一个样式层级或者改变现有层级的优先级。

• @layer layer-name? {rules}; 这种形式用于定义一个新的样式层级，如果名称为空，则为匿名层级。
• @layer 后接一个或多个层级名称，用于指定样式层级的优先级顺序，按照前后顺序。

3.2 让整个 CSS 文件变成 @layer

如果我们希望将整个 CSS 文件作为一个层级，可以使用以下语法：

@import 中使用：

1

@import (utilities.css) layer(utilities);

<link> 元素引用 (*)：

1
2
3

<link rel="stylesheet" href="utilities.css" layer="utilities">
<!-- 样式引入到一个匿名级联层中 -->
<link rel="stylesheet" href="utilities.css" layer>

3.3 嵌套层级

@layer 也支持嵌套定义，这使得我们可以在一个层级中进一步细分样式规则。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

@layer base {
 @layer typography {
 h1 {
 font-size: 24px;
 }
 p {
 font-size: 16px;
 }
 }
}

在嵌套层级中，外层层级的优先级低于内层层级。

多嵌套语法下的优先级：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@layer A {
 p { color: red; }
 @layer B {
 p { color: green; }
 }
}
@layer C {
 p { color: orange; }
 @layer D {
 p { color: blue; }
 }
}

其中的优先级大小是这样的：C > C.D > A > A.B

另外，嵌套语法还支持使用级联写法简化。

例如，普通内外嵌套写法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@layer outer {
 button {
 width: 100px;
 height: 30px; 
 }
 @layer inner {
 button {
 height: 40px;
 width: 160px;
 } 
 }
}

上面的内外嵌套语法还可以写成下面这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@layer outer {
 button {
 width: 100px;
 height: 30px; 
 }
}
@layer outer.inner {
 button {
 height: 40px;
 width: 160px;
 } 
}

4 @layer 的兼容性

5 参考

• MDN Web Docs - @layer
• 详解日后定会大规模使用的 CSS @layer 规则

2025-06-11 10:05:36

在使用 Vue.js 开发前端应用时，开启 history 模式可以让你的路由更加友好。然而，在部署应用时，需要正确配置 NGINX，以支持前端路由和 API 请求。本文将详细介绍如何配置 NGINX，使其能够处理 Vue 应用的 history 模式，并设置 API 代理。

1 前提条件

在开始之前，请确保你已经完成以下步骤：

• 安装并配置好 NGINX。
• 完成 Vue.js 应用的开发，并使用 npm run build 命令打包应用。

2 NGINX 配置示例

以下是一个典型的 NGINX 配置示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

server {
 listen 80; # 监听80端口
 server_name your_domain.com; # 替换为你的域名

 location / {
 root /path/to/your/dist; # 指向打包后的文件夹
 try_files $uri $uri/ /index.html; # 尝试访问指定文件，如果找不到则重定向到index.html
 }

 # API 代理设置
 location /api/ {
 proxy_pass http://your_api_server; # 替换为你的 API 服务器地址
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}

2.1 配置说明

• listen: 指定 NGINX 监听的端口，通常是 80（HTTP）。
• server_name: 配置你的域名。
• root: 指向 Vue 应用的打包输出目录，通常是 dist 文件夹。
• try_files: 尝试访问请求的文件，如果不存在，则返回 index.html，以允许 Vue Router 处理前端路由。
• location /api/: 所有以 /api/ 开头的请求会被代理到指定的 API 服务器。
• proxy_pass: 设置 API 请求转发到的后端服务器地址。

2.2 部署步骤

1. 打包 Vue 应用：

   1	npm run build

2. 上传内容：将 dist 文件夹的内容上传到服务器的指定路径。

3. 修改 NGINX 配置：编辑 NGINX 配置文件，通常在 /etc/nginx/sites-available/default 或 /etc/nginx/nginx.conf。

4. 检查配置：检查 NGINX 配置是否有语法错误：

   1	sudo nginx -t

5. 重新加载 NGINX：

   1	sudo systemctl reload nginx

3 总结

通过上述配置，你的 Vue.js 应用将可以在 NGINX 上正常运行，并支持 history 模式的路由。同时，所有以 /api/ 开头的请求将被有效地代理到后端服务器。这样，前端与后端的交互就更加流畅自然。

希望这篇文章能帮助你顺利部署 Vue 应用！如有任何问题，欢迎留言讨论。

2025-04-10 16:35:34

MMT webfont package

The webfont package for the MMT typeface.

Demo

MMT typeface online demo

Installation

Browser

The link embedding method can be used by web pages, mini-programs, and other platforms that support loading CSS styles.

1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mmt-webfont/dist/result.css">

1

@import url('https://cdn.jsdelivr.net/npm/mmt-webfont/dist/result.css');

NPM

To use the MMT webfont in your project, you can install it via npm:

1

npm install mmt-webfont

Then, you can import the CSS file in your project:

1

import 'mmt-webfont/dist/result.css'

Usage

Restricted font usage area:

1
2
3

article {
 font-family: 'MMT';
}

2025-04-09 10:13:22

Vercel API Proxy

API proxies powered by Vercel.

[toc]

Hosts

• https://api.lruihao.cn
• https://cell-api.vercel.app

API List

Go to the Vercel API Proxy and select the API you want to use.

Gravatar

• API: /gravatar/avatar/(.*)
• Method: GET/POST

Get the avatar of the email fee47a2f4f2cc71f99a02b0a73ecfee0 by Gravatar API.

1
2

GET /gravatar/avatar/fee47a2f4f2cc71f99a02b0a73ecfee0 HTTP/1.1
Host: cell-api.vercel.app

Google

• API: /gravatar/avatar/(.*)
• Method: *

Get favicons by Google API.

1
2

GET /google/s2/favicons?sz=64&domain=lruihao.cn HTTP/1.1
Host: cell-api.vercel.app

Netease Comment

• API: /netease/comment
• Method: GET/POST
• Request parameter:

  name	Required	type	description
  type	no	string	Type is text, returns text, is Json, returns Json by default
  id	no	int	Specify the playlist id to get the hot reviews, default is NetEase Cloud Hot Songs List

Request example:

1
2

GET /netease/comment?mid=2280569152 HTTP/1.1
Host: cell-api.vercel.app

Response example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
 "code": 1,
 "data": {
 "musicId": 40915177,
 "musicName": "父亲写的散文诗",
 "musicUrl": "http://music.163.com/song/media/outer/url?id=40915177",
 "artist": "许飞",
 "picUrl": "http://p1.music.126.net/h00CveXrABOfiWmFDLzRDg==/3405187515194971.jpg",
 "content": "一首歌 一万个人的故事",
 "nickname": "Gallianoo",
 "avatarUrl": "http://p2.music.126.net/3U7kD9M39sfkrPdWVvaGog==/109951163278309929.jpg",
 "likedCount": 4743,
 "time": 1457059879799,
 "timeStr": "2016-03-04"
 }
}

2025-01-20 15:56:38

本指南完整解释了弹性盒子（Flexible Box）的所有内容，重点介绍了父元素（弹性容器）和子元素（弹性项目）的所有不同可能属性。

背景

Flex 布局（弹性盒子）模块（截至 2017 年 10 月为 W3C 候选推荐）旨在提供一种更有效的方法来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此有“弹性（flex）”一词）。

Flex 布局的主要思想是赋予容器调整其项目宽度/高度（和顺序）的能力，以最佳填充可用空间（主要是适应各种显示设备和屏幕尺寸）。一个弹性容器会扩展项目以填充可用的空闲空间，或缩小它们以防止溢出。

最重要的是，Flex 布局是方向无关的，与常规布局（块布局是基于垂直的，而行内布局是基于水平的）相比。虽然这些布局在页面上工作良好，但它们缺乏灵活性（不带双关意味）来支持大型或复杂的应用程序（特别是在方向变化、调整大小、拉伸、收缩等方面）。

基础知识和术语

由于 flexbox 是一个整体模块，而不是单个属性，因此它涉及很多内容，包括其整个属性集。其中一些属性应设置在容器（父元素，称为“弹性容器”）上，而其他属性应设置在子元素（称为“弹性项目”）上。

如果“常规”布局基于块和内联流方向，则弹性布局基于“弹性流方向”。请看规范中的这张图，它解释了弹性布局背后的主要思想。

项目将按照主轴（main axis）或横轴（cross axis）进行布局。

• 弹性容器（flex container）
  包含弹性项目的父元素。
• 弹性项目（flex item）
  弹性容器的子元素。
• 主轴（main axis）
  弹性容器的主轴是弹性项目排列的主要轴。请注意，主轴不一定是水平的；这取决于属性 flex-direction（见下文）。
• 主轴起点（main-start） | 主轴终点（main-end）
  弹性项目从主轴起点开始排列，直到主轴终点。
• 主轴尺寸（main size）
  弹性项目的宽度或高度，取决于主轴的方向，是项目的主尺寸。弹性项目的主尺寸属性是主维度上的 width 或 height 属性。
• 横轴（cross axis）
  与主轴垂直的轴称为横轴。其方向取决于主轴的方向。
• 横轴起点（cross-start） | 横轴终点（cross-end）
  弹性行（flex line）填充项目并放置在容器中，从横轴起点开始，向横轴终点方向排列。
• 横轴尺寸（cross size）
  弹性项目的宽度或高度，取决于横轴的方向，是项目的横尺寸。横尺寸属性是横向维度上的 width 或 height 属性。

弹性布局属性

父元素（弹性容器）的属性

display

这定义了一个弹性容器；根据给定的值，可以是内联或块级。这为其所有直接子元素启用弹性上下文。

1
2
3

.container {
 display: flex | inline-flex;
}

请注意，CSS 列对弹性容器没有影响。

flex-direction

这建立了主轴，从而定义了弹性项目在弹性容器中放置的方向。Flexbox 是一个单向布局概念（除了可选的换行）。将弹性项目主要视为在水平行或垂直列中布局。

1
2
3

.container {
 flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：在 ltr 中从左到右；在 rtl 中从右到左
• row-reverse：在 ltr 中从右到左；在 rtl 中从左到右
• column：与 row 相同，但从上到下
• column-reverse：与 row-reverse 相同，但从下到上

flex-wrap

默认情况下，所有弹性项目都将尝试适应一行。你可以更改此属性并允许项目根据需要换行。

1
2
3

.container {
 flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：所有弹性项目都在一行上。
• wrap：弹性项目将换行到多行，从上到下。
• wrap-reverse：弹性项目将从下到上换行到多行。

flex-flow

这是 flex-direction 和 flex-wrap 属性的简写，它们共同定义了弹性容器的主轴和横轴。默认值是 row nowrap。

1
2
3

.container {
 flex-flow: column wrap;
}

justify-content

这定义了沿主轴的对齐方式。它有助于分配当所有弹性项目在一行上都不可调整大小或可调整大小但已达到最大尺寸时剩余的额外空间。它还对项目溢出行时的对齐方式施加了一些控制。

1
2
3

.container {
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start（默认）：项目向弹性方向的起点对齐。
• flex-end：项目向弹性方向的终点对齐。
• start：项目向 writing-mode 方向的起点对齐。
• end：项目向 writing-mode 方向的终点对齐。
• left：项目向容器的左边缘对齐，除非这与 flex-direction 不符，则表现为 start。
• right：项目向容器的右边缘对齐，除非这与 flex-direction 不符，则表现为 end。
• center：项目在行中居中对齐
• space-between：项目在行中均匀分布；第一个项目在起始线，最后一个项目在终止线
• space-around：项目在行中均匀分布，周围有相等的空间。请注意，视觉上这些空间并不相等，因为所有项目在两侧都有相等的空间。第一个项目在容器边缘有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的间距。
• space-evenly：项目分布，使得任何两个项目之间的间距（以及到边缘的空间）相等。

请注意，这些值的浏览器支持是有差异的。例如，某些版本的 Edge 从未支持 space-between，而 start/end/left/right 尚未在 Chrome 中实现。MDN 有详细的图表。最安全的值是 flex-start、flex-end 和 center。

还有两个附加关键字可以与这些值配对：safe 和 unsafe。使用 safe 确保无论你如何进行这种类型的定位，都不会将元素推到屏幕外（例如，推到顶部）以至于内容无法滚动到（称为“数据丢失”）。

align-items

这定义了当前行上弹性项目沿横轴的默认布局行为。可以将其视为横轴（垂直于主轴）的 justify-content 版本。

1
2
3

.container {
 align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）
• flex-start / start / self-start：项目放置在横轴的起点。这些之间的区别很微妙，主要是关于遵守 flex-direction 规则或 writing-mode 规则。
• flex-end / end / self-end：项目放置在横轴的终点。区别再次很微妙，主要是关于遵守 flex-direction 规则与 writing-mode 规则。
• center：项目在横轴上居中对齐
• baseline：项目对齐，使它们的基线对齐

safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问。

align-content

这在横轴上有额外空间时对齐弹性容器的行，类似于 justify-content 在主轴上对齐单个项目。

1
2
3

.container {
 align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal（默认）：项目按默认位置打包，仿佛未设置任何值。
• flex-start / start：项目打包到容器的起点。（更多支持的）flex-start 遵守 flex-direction，而 start 遵守 writing-mode 方向。
• flex-end / end：项目打包到容器的终点。（更多支持的）flex-end 遵守 flex-direction，而 end 遵守 writing-mode 方向。
• center：项目在容器中居中对齐
• space-between：项目均匀分布；第一行在容器的起点，最后一行在终点
• space-around：项目均匀分布，每行周围有相等的空间
• space-evenly：项目均匀分布，周围有相等的空间
• stretch：行拉伸以占据剩余空间

safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问。

gap, row-gap, column-gap

gap 属性明确控制弹性项目之间的空间。它仅在项目之间应用间距，而不是在外边缘。

1
2
3
4
5
6
7
8

.container {
 display: flex;
 ...
 gap: 10px;
 gap: 10px 20px; /* 行间距 列间距 */
 row-gap: 10px;
 column-gap: 20px;
}

这种行为可以被认为是最小的间隙，如果间隙更大（由于类似 justify-content: space-between; 的原因），则间隙仅在该空间变小的情况下生效。

它不仅适用于 flexbox，gap 也适用于网格和多列布局。

子元素（弹性项目）的属性

order

默认情况下，弹性项目按源顺序布局。但是，order 属性控制它们在弹性容器中出现的顺序。

1
2
3

.item {
 order: 5; /* 默认值是 0 */
}

具有相同顺序的项目恢复为源顺序。

flex-grow

这定义了弹性项目在必要时增长的能力。它接受一个无单位的值，作为比例。它决定了弹性容器内可用空间的多少应该由该项目占据。

如果所有项目的 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子元素。如果其中一个子元素的值为 2，则剩余空间将占据其他元素的两倍（或至少尝试这样做）。

1
2
3

.item {
 flex-grow: 4; /* 默认值是 0 */
}

负数无效。

flex-shrink

这定义了弹性项目在必要时收缩的能力。

1
2
3

.item {
 flex-shrink: 3; /* 默认值是 1 */
}

负数无效。

flex-basis

这定义了在分配剩余空间之前元素的默认大小。它可以是一个长度（例如 20%、5rem 等）或一个关键字。auto 关键字表示“查看我的宽度或高度属性”（这曾经由 main-size 关键字暂时完成，直到被弃用）。content 关键字表示“根据项目的内容调整大小”——这个关键字尚未得到很好的支持，因此很难测试，也很难知道它的兄弟 max-content、min-content 和 fit-content 的作用。

1
2
3

.item {
 flex-basis: | auto; /* 默认值是 auto */
}

如果设置为 0，则不考虑内容周围的额外空间。如果设置为 auto，则根据其 flex-grow 值分配额外空间。请参见此图。

flex

这是 flex-grow、flex-shrink 和 flex-basis 的简写。第二个和第三个参数（flex-shrink 和 flex-basis）是可选的。默认值是 0 1 auto，但如果你使用单个数字值设置它，例如 flex: 5;，则会将 flex-basis 更改为 0%，因此它类似于设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。

1
2
3

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议你使用此简写属性，而不是单独设置各个属性。简写智能地设置其他值。

align-self

这允许覆盖单个弹性项目的默认对齐方式（或由 align-items 指定的对齐方式）。

请参阅 align-items 解释以了解可用值。

1
2
3

.item {
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

请注意，float、clear 和 vertical-align 对弹性项目没有影响。

为 Flexbox 添加前缀

我们可以使用 Sass@mixin 来帮助处理一些浏览器前缀问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

@mixin flexbox() {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}

@mixin flex($values) {
 -webkit-box-flex: $values;
 -moz-box-flex: $values;
 -webkit-flex: $values;
 -ms-flex: $values;
 flex: $values;
}

@mixin order($val) {
 -webkit-box-ordinal-group: $val; 
 -moz-box-ordinal-group: $val; 
 -ms-flex-order: $val; 
 -webkit-order: $val; 
 order: $val;
}

.wrapper {
 @include flexbox();
}

.item {
 @include flex(1 200px);
 @include order(2);
}

参考

本文内容翻译自 Chris Coyier 的 A Complete Guide to Flexbox，感谢原作者的辛勤付出。

除此之外，你还可以通过一些小游戏来学习 Flexbox：

• Flexbox Froggy - 一个有趣的游戏，可以帮助你学习 Flexbox。
• Flexbox Defense - 一个塔防游戏，可以帮助你学习 Flexbox。

题外话

这篇文章的翻译早就想做了，但是一直没有时间，拖了一年，今天终于抽出时间来完成了。