-
align-items:center不生效的主因是容器未设display:grid/inline-grid；需确保父容器有明确高度，且无更高优先级样式覆盖，单个子项居中应改用align-self:center。
-
浮动和inline-block均可实现元素并排，但机制不同：float脱离文档流，内容环绕，需清除浮动防止父容器塌陷，无间隙问题；inline-block不脱离文档流，像文字排列，受空格影响产生间隙，需特殊处理，父容器能正常包裹。inline-block支持text-align和vertical-align对齐，适合简单布局如导航；float曾用于多列布局，现多被Flex或Grid取代。
-
hosts文件是Windows系统中用于域名映射的无扩展名文件，位于C:\Windows\System32\drivers\etc\目录，通过管理员权限编辑可将自定义域名如mywebsite.local指向127.0.0.1，实现本地网站测试；需配合HTTP服务（如Python启动的本地服务器）在指定端口运行，确保CSS等资源正常加载，最终在浏览器通过http://mywebsite.local:8000访问验证，完成前端调试环境模拟。
-
Webpack是通用模块打包器，需手动配置loader/plugin构建bundle；Vite基于原生ESM按需编译，开箱即用、启动快、HMR精准，生产默认Rollup分包，二者核心思维与适用场景根本不同。
-
原生input[type="range"]不适合五星评分，应使用radio+label配合CSS:checked和兄弟选择器实现可点击选星；需添加ARIA语义、JS处理hover预览/值同步/移动端热区放大，并确保无障碍与跨端兼容。
-
骨架屏闪烁动画禁用opacity而用position+transform，因opacity在低端环境易卡顿，transform可硬件加速；须设父容器position:relative和overflow:hidden，伪元素宽高略大，IE11/iOS12需降级left动画，多组件同步需JS控制起始。
-
使用link标签的media属性按需加载主题，结合CSS自定义变量与本地存储，实现轻量、快速、可维护的多主题切换方案。1.将不同主题样式拆分为独立文件，初始仅加载匹配系统偏好或用户选择的主题；2.未启用主题设置media="notall"避免加载；3.用户切换时通过JavaScript动态修改目标link的media为"all"以激活；4.各主题CSS文件仅定义变量如--primary-color，主样式统一使用var()引用；5.优先读取localStorage中的用户选择，无则回退至prefers-c
-
sticky定位需父容器提供滚动上下文并设置偏移量如top:0；2.与flex布局结合时，flex负责结构分配，sticky实现滚动固定效果；3.示例中.main-content设为flex子项并启用滚动，其内.sticky-element在距顶10px时吸附；4.注意避免祖先元素使用transform、filter等破坏sticky的行为，且滚动容器应为sticky元素的直接祖先；5.移动端需测试兼容性，老版安卓浏览器支持可能不完整；6.核心是明确布局职责：flex控整体，sticky管交互，滚动源位置
-
首先通过手机浏览器访问本地HTML文件可直接预览网页效果，需将文件存于Download等目录并输入正确file路径；其次可用HTMLViewer等第三方应用运行调试；最后借助文件管理器定位内部存储中的具体位置以确保顺利读取。
-
JavaScript模板字符串是ES6用反引号`定义的字符串语法，支持多行文本和${...}嵌入表达式；仅反引号启用该特性，${}内须为表达式而非语句，保留空白字符需谨慎处理。
-
HTML5中SVG图标有五种引入方式：一、内联SVG可完全控制样式；二、背景图SVG适合复用且无交互；三、SVGSprite减少请求并支持语义化引用；四、SVG字体兼容旧浏览器；五、JavaScript动态注入适配主题切换等场景。
-
try-catch仅捕获同步异常，如throw错误、运行时错误、JSON.parse失败；无法捕获异步错误、Promise拒绝、事件回调错误、语法错误及资源加载错误。
-
设置文本行高应使用CSS的line-height属性，它通过控制行间垂直距离提升可读性。该属性支持normal、无单位数值、长度单位和百分比，推荐使用无单位值（如1.6），因其能随字体大小按比例缩放，利于响应式设计。line-height作用于文本行内部的垂直空间，与font-size协同影响行距，而padding和margin则控制元素内外边距，三者功能不同。无单位line-height在继承时保持乘数关系，确保各级文本行高与自身字号成比例，避免因字体变化导致行距不当。实际开发中需注意：用line-he
-
span元素在CSS中作为内联元素使用，主要用于文本的局部样式化。1）通过CSS，可以对span元素设置颜色、字体、背景等样式，使文本更加生动。2）span元素还可以用于布局控制，如调整内外边距。3）使用时需注意避免滥用，优先选择语义化更强的元素。4）在性能优化上，应简化CSS规则并使用预处理器管理样式。
-
animation-direction支持哪些取值？animation-direction控制单次循环内关键帧的执行顺序，不是“让整个动画倒着播”，而是决定每一遍循环里@keyframes是正向走还是反向走。它有四个合法值：normal、reverse、alternate、alternate-reverse。其中normal是默认值，容易被忽略——如果你没显式设置，动画永远从0%走到100%。reverse：每遍都从100%倒着走到0%，视觉上像“倒放”，但时间轴仍是正向推
