-
用grid-template-columns的minmax()配合auto-fit实现响应式列宽最可控，避免像素值硬编码；Flex列宽需结合flex-basis、flex-grow与min-width；Grid与Flex混用时应明确层级职责，防止宽度冲突。
-
::first-letter加粗不生效的根本原因是其仅作用于块级上下文中的首个纯文本字符，若父元素为inline/flex或首字被内联标签包裹即失效；需满足父元素块级、首字符无包裹、无高优先级覆盖三前提；可用inline-block强制触发，或改用现代initial-letter属性。
-
在JavaScript中实现树形菜单需要以下步骤：1.使用HTML的<ul>和<li>构建树形结构；2.通过CSS控制节点的显示和隐藏；3.用JavaScript处理节点的点击事件，实现展开和折叠功能；4.添加图标来直观显示节点状态；5.通过AJAX动态加载子节点，优化性能；6.实现搜索功能，高亮匹配节点并展开相关父节点；7.使用虚拟滚动优化大数据量下的性能。
-
关键在于选对工具链并调优配置：新项目用Vite（默认esbuild压缩，需切terser删console），老项目用Webpack（需手动配TerserPlugin、SplitChunksPlugin及drop_console）；Terser必须启用mangle和drop_console等参数；sourcemap线上用hidden模式，避免泄露路径且适配错误监控。
-
transition是复合属性，需同时指定时长与属性名（如transition:background-color0.2sease），仅设timing-function或duration为0s均无效；不可过渡position等非数值属性，应改用top/left或transform；避免transition:all，推荐显式声明opacity和transform等高性能属性。
-
使用link标签引入多个CSS文件并设置disabled属性控制初始状态，通过JavaScript动态切换主题；2.利用localStorage保存用户偏好，实现刷新后仍保留主题选择，提升用户体验。
-
盒模型影响元素尺寸和布局，进而影响对齐效果。通过设置box-sizing:border-box可统一尺寸计算方式，避免错位；结合margin:0auto可实现块级元素水平居中；使用Flexbox的justify-content和align-items能灵活控制主轴与交叉轴对齐，推荐用于复杂布局；内联元素或文本则通过text-align实现水平对齐，line-height辅助垂直居中。关键在于统一box-sizing并综合运用布局属性。
-
JavaScript单元测试核心是写小、可隔离、可重复的逻辑验证用例，推荐Vitest为起点，因其启动快、语法简、兼容Jest；其他如Jest适合复杂生态，Jasmine/Mocha更轻量可控，WebTestRunner专注纯浏览器ESM场景。
-
JavaScript事件循环由运行时环境实现，JS引擎只负责执行代码与维护队列；每次执行一个宏任务后清空全部微任务，setTimeout(0)仍属宏任务，queueMicrotask更及时。
-
移动端P3色域不生效是因渲染链路默认锁定sRGB，需HTMLmeta与CSS双层声明协同：meta必须置于head最前，CSS须先声明color-gamut:p3再使用color(display-p3)，且display-p3参数须经专业工具转换，不可直接换算十六进制。
-
overflow:auto触发滚动的条件是内容尺寸超出容器设定的宽高；需限制容器width/height、内容溢出且不换行，horizontal滚动还需white-space:nowrap和overflow-x:auto。
-
使用file命令可快速检测Mac上HTML文件的编码类型。打开终端，输入file-Iyourfile.html，查看输出中的charset字段，如charset=utf-8表示UTF-8编码；结合ls、for循环与grep可批量处理并过滤显示多个.html文件的编码信息，提升检测效率。
-
Bootstrap5中，浮动标签（form-floating）默认禁用label内部的pointer-events，导致tooltip无法触发；只需为触发元素添加pe-auto类并初始化Tooltip实例即可正常工作。
-
table-layout:fixed是解决列宽错乱的前置条件，需配合显式width和col元素控制列宽；浮动不适用于td/th，仅可用于table整体实现文字环绕；现代替代方案是flex布局。
-
PostCSS是一个基于JavaScript插件链式处理CSS的平台，本身不直接处理CSS，需通过插件（如autoprefixer、cssnano）实现功能，并集成于Webpack（viapostcss-loader）或Vite（默认内置支持，依赖postcss.config.js配置）中运行。
