CSS

回流（Reflow）和重绘（Repaint）  是浏览器渲染网页过程中两个关键的性能相关概念，理解它们有助于优化前端性能。 一、基本概念 1. 回流（Reflow / Layout） 定义：当 DOM

**BFC（Block Formatting Context，块级格式化上下文）**  是 CSS 渲染中的一个核心概念，它决定了**块级元素如何布局、如何与兄弟/子元素交互**。**理解 BFC 能

🎯 问题背景 为什么移动端1px看起来很粗？ 在移动端，由于设备像素比（DPR）的存在，CSS中的1px并不等于物理像素的1px。 问题原理： CSS的1px = 设备像素比 × 物理像素 iPhon

🎯 流式布局实现方式概览 方式 适用场景 兼容性 复杂度 百分比布局 简单两栏、三栏布局 优秀 简单 Flexbox布局 一维布局、导航栏、卡片 现代浏览器 中等 CSS Grid布局 二维布局、复杂

🎯 核心区别 百分比：相对于父元素的尺寸 rem：相对于根元素的字体大小 🎯 总结对比 特性 百分比布局 rem布局 参考基准 父元素尺寸 根元素字体大小 嵌套影响 层层依赖，复杂计算 统一基准，简单

让我用最简单的方式来解释这三个单位： 🎯 核心理解 rem = "以网页根部为准" 想象网页有一个"总开关"（html标签） rem就是以这个"总开关"的字体大小为标准 1rem = html的字体大

🎯 什么是 Margin 合并 Margin 合并（也叫 Margin 折叠）是指相邻元素的垂直 margin 会合并成一个 margin，取两者中的较大值，而不是相加。 📊 Margin 合并的三种

🎯 核心作用 box-sizing: border-box 改变了CSS盒模型的计算方式，让元素的宽度和高度包含内边距(padding)和边框(border)，而不是仅仅内容区域。 📊 盒模型对比 默