-
主题换肤应通过:root定义--primary、--text、--bg等5–8个语义化变量，用class切换html元素主题类并配合localStorage记忆偏好，避免硬编码颜色、内联样式及忽略SVG/第三方组件适配。
-
位运算通过操作二进制提升效率，如用n&1判断奇偶、n&(n-1)判断2的幂、左移右移实现乘除2的幂，异或交换变量，结合补码处理负数，适用于状态压缩、快速取模等场景。
-
通过隐藏原生复选框并结合:checked与::before伪元素，可自定义复选框样式。1.使用appearance:none隐藏默认样式；2.利用::before创建带边框的方块作为外观；3.在:checked状态下改变背景色并显示对勾；4.可选使用::after绘制更精确的对勾图形，实现美观且兼容的自定义效果。
-
用::before伪元素画箭头需设content:""、position:absolute、width:0、height:0，仅保留单方向实色边框（如border-top:8pxsolid#333）与另三向透明边框，利用边框交汇“挤”出三角形；箭头方向由实色边框方向决定，水平居中用left:50%+transform:translateX(-50%)。
-
link标签必须放在head里，否则因浏览器自上而下解析会导致样式未就绪即渲染，引发闪屏或错乱；rel="stylesheet"不可省略，href路径需准确，且应优先使用link而非@import或内联样式。
-
本文详解如何在异步操作（如MSAL登录）成功后，安全、高效地触发依赖ReactQuery的自定义Hook，避免“hooks不能在条件或函数中调用”的错误，并通过enabled:false与refetch()实现按需数据获取。
-
<p>元素宽高计算不准确主因是盒模型（content-box）下width/height不含padding和border，或受box-sizing设置、父容器限制、替换元素固有尺寸、margin折叠等影响；推荐全局设*{box-sizing:border-box;}并用开发者工具实时验证布局。</p>
-
-webkit-user-select:none仅禁用鼠标选中文本，不影响开发者工具查看、JS读取、抓包或截图，纯属UI交互优化，无任何安全防护能力。
-
前端构建工具通过import语句触发CSS处理链：css-loader解析依赖，postcss-loader处理前缀与变量，style-loader（开发）或mini-css-extract-plugin（生产）决定内联style或提取link；后端仅提供无样式HTML骨架，样式路径、加载时机、作用域均由前端构建控制。
-
本文详解如何使用React的useStateHook实现两个Form.Select组件的动态联动：当用户选择课程后，自动更新教授下拉列表内容。
-
visibility:hidden保留布局空间且元素仍可交互，display:none彻底移除元素并触发重排——核心区别在于是否占位及是否脱离文档流。
-
static为默认定位，不脱离文档流，不支持偏移；2.relative相对自身原位置偏移，仍占文档流空间；3.absolute脱离文档流，相对于最近已定位祖先定位；4.fixed相对于视口固定，不随滚动移动；5.sticky在滚动到阈值时由relative变为fixed，常用于表头吸附。
-
本文探讨在移动端使用<select>实现跳转导航时，是否应包裹<nav>标签，并对比推荐的语义化、可访问性更优的纯HTML+CSS下拉导航方案。
-
HTML5新增input类型及属性大幅简化表单开发：13种type（如email、date）实现原生校验与软键盘适配；required/placeholder/autocomplete提升无障碍体验；验证API（checkValidity等）支持动态规则；需注意回退方案与移动端差异。
-
Salix前端框架已正式停止维护，其功能由更活跃、更稳定的salix-core取代；本文指导开发者快速迁移原有Salix应用（如计数器示例），替换依赖、更新API调用方式，并验证渲染流程。
