-
子元素选择器（>）仅选直接子元素，后代选择器（空格）选所有层级后代，相邻兄弟选择器（+）选紧接的同级元素，通用兄弟选择器（~）选之后所有同级匹配元素，组合使用可精准控制样式无需额外类名。
-
按钮设置border后变大，因默认盒模型下border会额外增加尺寸；使用box-sizing:border-box可解决，使width和height包含border和padding，保持总尺寸不变。例如宽100px、高40px的按钮加2px边框后仍维持原尺寸，避免布局错位。推荐全局设置button{box-sizing:border-box;}以统一按钮样式，配合rem或em等相对单位更利于响应式设计，确保不同屏幕下视觉比例一致。这是控制按钮尺寸的关键细节。
-
可使用语义化<hr>标签或CSSborder属性实现视觉分隔：一、<hr>用于段落章节分隔；二、border-bottom为块级元素加底部分割线；三、border-left/right实现垂直分隔；四、伪元素::after/::before绘制自定义分割线。
-
本文解决初学者在用JavaScript编写石头剪刀布游戏时因变量作用域缺失、条件判断逻辑冲突导致结果恒为“Tie”或“Pleaseenteravalidprompt”的核心问题，并提供健壮、可复用的函数式实现方案。
-
figcaption必须嵌套在figure内才具语义和渲染效果，是figure的专属子元素，用于简洁、自包含地说明其内容；应置于figure首或尾（推荐结尾），仅限一个，需重置CSS以确保布局稳定，且不可替代img的alt属性。
-
利用CSS伪元素可高效创建提示图标，无需额外HTML。首先为容器设置relative定位，通过::before或::after添加content内容，结合position绝对定位将图标置于元素右上角；可使用文字或FontAwesome等字体图标（需指定font-family和Unicode），并用背景色、尺寸、圆角等样式美化；还可通过:hover触发::after显示提示文字框，注意设置z-index避免层级问题。该方法轻量且易维护，适用于表单标注等场景。
-
在Rails7项目中，若需引入无ES模块结构、仅依赖全局变量的第三方minifiedJS库（如jQuery插件、旧版Chart.js等），应绕过importmap，转而使用Sprockets的传统资产管线，通过//=require指令原样加载并合并脚本。
-
JavaScript解构赋值是从数组或对象中提取值并赋给变量的简洁语法，支持重命名、默认值、嵌套解构、数组按位置提取、跳过元素、剩余运算符、函数参数自动解构及与rest/spread组合使用。
-
body顶部空白是移动端浏览器（如Safari、ChromeforiOS）默认为body设置margin及viewport缩放、font-size继承等共同导致；需显式重置html/body的margin/padding/height，并配置viewport禁用缩放。
-
JavaScript错误处理需提前预防、精准捕获、合理反馈、有效恢复；应选择性使用try-catch包裹高风险操作，结构化抛出错误，设置全局兜底，并借助严格模式与工具链提升健壮性。
-
IndexedDB是W3C标准的客户端数据库，支持存储大量结构化数据，具备异步操作、事务机制、索引查询和大容量存储等特点，适用于离线应用与高性能前端场景。
-
模块联邦是Webpack5实现运行时代码共享的核心方案，支持远程模块按需加载、依赖版本统一及热更新，但需注意React版本一致、样式隔离、路由协调与错误边界处理。
-
newDate()默认输出ISO格式，需用toLocaleString()或Intl.DateTimeFormat实现本地化格式；注意getMonth()返回0–11、补零用padStart、时区用IANAID，复杂场景推荐dayjs/luxon。
-
text-align用于设置文本水平对齐方式，包括left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）及start/end（智能对齐），适配多语言与排版需求，提升可读性与视觉层次。
-
通过:root定义全局颜色变量可集中管理样式，如--primary-color:#007bff；利用var()函数调用变量，实现主题统一与动态切换，提升维护效率和团队协作一致性。
