css

Day 07 _ 那条 1px 的线,为什么在手机上忽粗忽细本文是《30天精通CSS》专栏第 07 篇,订阅专栏不迷路。本文目录先看这两条线,一条粗一条细三个嫌疑,逐个排除

小江的记录本

【CSS】CSS 动画：transition、animation、transform、CSS3 新特性（附《思维导图》）CSS动画是通过CSS属性随时间的变化实现的视觉动效，无需JavaScript即可实现流畅的交互动画。主要分为三大类：

CSS Grid 网格布局：二维布局神器，轻松实现复杂网页排版上一篇文章我们聊了 Flex——它解决的是一维布局问题：沿着一条主轴排布元素。但真实的网页排版几乎都是二维的：既要管横排、又要管竖排；既要有固定的侧栏，又要有自适应的主区；既要有跨多列的标题，又要有多行多列的卡片墙。过去遇到这种需求，要么用 Flex 嵌套（一层套一层，DOM 变臃肿），要么退回 float 加各种 hack。

CSS 预处理器深度解析-Day35在现代前端工程化体系中，CSS 预处理器（CSS Preprocessor）已成为不可或缺的一环。它并非要取代 CSS，而是在 CSS 语法之上提供了一层抽象，使开发者能够以更高效、更可维护的方式编写样式代码，最终编译为浏览器可识别的标准 CSS。

小江的记录本

【CSS】CSS 核心：盒模型、BFC/IFC、Flex/Grid 布局、响应式布局、移动端适配（附《思维导图》）CSS 布局体系从基础盒模型到现代二维布局，再到多端适配，形成了一套完整的「基础渲染规则 → 布局方案 → 多端适配」的知识层级。以下从六大核心模块进行系统性梳理。

小江的记录本

【HTML】HTML5 新特性、语义化标签、浏览器渲染流程（附《思维导图》）HTML（HyperText Markup Language，超文本标记语言）是构建网页结构的核心标记语言，标准由 W3C 与 WHATWG 共同维护，当前处于**HTML 活标准（Living Standard）**阶段，持续迭代更新。

ℋᙚᵐⁱᒻᵉ鲸落

移动端滑动手势冲突：overflow: auto导致外层横向滑动失效在做移动端交互时，有一种场景非常常见：外层容器负责左右拖动，内层容器负责上下滚动。例如：看起来这个需求并不复杂。但是我在实际开发时遇到了一个问题：

Vite项目中使用Less步骤，详细使用示例在 Vite 项目中使用 Less 非常简单，因为 Vite 内置了对 CSS 预处理器的支持。你不需要安装额外的 Loader 或 Plugin，只需安装 less 依赖即可。

Sass和Less功能、使用场景、用法对比Sass 和 Less 是目前最主流的两大 CSS 预处理器。它们的核心目标都是解决原生 CSS 在大型项目中难以维护、代码冗余的问题，但在设计哲学、功能深度和生态整合上存在显著差异。

Less功能介绍和完整使用示例Less (Leaner Style Sheets) 是一门向后兼容的 CSS 预处理器扩展语言。它允许你使用变量、嵌套规则、Mixin（混入）、函数等编程特性来编写样式代码，最终编译成标准的 CSS 文件供浏览器解析。

Web前端周刊2026W34 | CSS类前缀选择器采纳、Lovable迁移TanStack Start、Fastify 6.0 Alpha本周 Web 开发热点：CSS 类前缀选择器获采纳、TanStack Router 查询预取与 Lovable 从 Next.js 迁至 TanStack Start 展现框架演进；Three.js 游戏与 WebGPU 黏体凸显图形创意；工具链侧 Fastify 6.0 进 Alpha、unbash 独立发布、TypeScript 中间件类型陷阱引发关注。

三十而立洋

Flex 与 Grid 布局完全指南一篇讲透 display: flex 与 display: grid：从基本概念到每一个属性，全部附代码示例与效果说明，最后给出两者的对比与选型建议。

事件传播、CSS动画、服务器字体与jQuery⭐ 老师强调：事件传播发生在嵌套父子元素绑定了相同事件类型时，触发其中一个会连带触发其他嵌套元素上的相同事件。就像洋葱层层包裹，碰外皮内层也感知到震动。

HTML/CSS/JS 基础与 Vue 技术栈深度解析当面试官问出 “是否熟悉前端基本技术，包括 HTML/CSS/JavaScript？介绍一下？” 时，千万不要只回答“熟悉”两个字。建议采用 “定义 → 核心特点 → 简单示例 → 总结” 的结构化方式，展现你的技术深度和表达逻辑。

风月说与山鬼

四、Tailwind CSS——间距与尺寸作用说明： Tailwind 的间距刻度，就是一套用来统一控制“距离”的数值体系。内边距、外边距、子元素间距、宽高都共用这套刻度，因此整个页面看起来会比较协调，不会出现一个地方用 14px、另一个地方又用 15px 的零散情况。

风月说与山鬼

三、Tailwind CSS——排版与文字样式作用说明：字体族指的是“用哪一类字体来显示文字”，例如无衬线字体、衬线字体或等宽字体。Tailwind 默认提供三个字体族工具类，分别对应 CSS 变量 --font-sans、--font-serif 和 --font-mono。写类名时就是 font-* 后面跟字体族名称。

里欧跑得慢

AI 驱动的 UI 国际化方案自动适配：从单一语言到多语言布局的智能转换UI 国际化（i18n）不仅是文本翻译，还涉及布局适配。德语文本比英语长 30%-40%，阿拉伯语从右到左（RTL）书写，中文没有词间空格影响换行。一个在英文下完美的布局，切换到德语后按钮文本溢出，切换到阿拉伯语后布局镜像翻转但图标方向未调整。

晓得迷路了

栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...🌰栗子前端技术周刊第 144 期 (2026.08.24 - 2026.08.30)：浏览前端一周最新消息，学习国内外优秀文章，让我们保持对前端的好奇心。

下拉菜单HTML/CSS/JS实现⭐ 老师强调：下拉菜单的本质是"容器+两块区域"——一块是对外展示的可见区域（如"学位管理"），另一块是默认隐藏的下拉内容区（二级菜单），鼠标悬停时展示，离开时隐藏。

里欧跑得慢

Flutter 像素级还原：设计稿到代码的视觉无损转换技巧做过 UI 还原的开发者都有这种经历：对着设计稿调了一下午，感觉"差不多了"，结果设计师走过来扫一眼就说，"这里间距是 12px 不是 14px"、"这个阴影扩散半径不对"、"文字行高跟设计稿不一样"。