-
unlayered样式总能覆盖@layer内规则，因CSS规范规定未归入任何@layer的样式天然位于级联顺序最前端，优先级高于所有命名层；如antd/dist/reset.css即属此类，会无条件压制Tailwindv4的@layerbase重置。
-
在前端开发中，可以通过CSS选择器实现模态框的显示控制，核心方法有1.利用:target伪类和2.使用“CheckboxHack”。1.:target伪类通过URL哈希与元素ID匹配来触发显示，点击关闭链接可清除哈希从而隐藏模态框；2.CheckboxHack则通过复选框的:checked状态结合兄弟选择器控制模态框的可见性。尽管这两种方式无需JavaScript且性能较优，但也存在明显局限，如关闭逻辑受限、多模态框管理困难、缺乏状态管理及无障碍支持不足等。因此，纯CSS方案适用于静态简单的场景，而涉及复
-
oncontextmenu属性仍可用但仅限内联绑定且优先级低于addEventListener；禁用右键无法真正防盗，因用户可通过禁用JS、DevTools等绕过，敏感内容须服务端控制。
-
在Vue3中，若需让多个动态组件同时挂载（而非仅激活项渲染），应避免使用<KeepAlive>配合单component切换，改用v-for+v-show实现DOM复用与实例常驻。
-
Builder.io图片对齐失效的根本原因是未设置display或flex上下文：图片默认为inline元素，text-align仅在块级父容器中生效；需手动设display:block或用flex容器包裹并配justify-content，同时注意width约束与box-sizing一致性。
-
最稳方案是用cropperjs的getCroppedCanvas()生成正方形canvas再转blob上传，而非仅靠CSS遮罩；必须设aspectRatio:1、防抖获取裁剪结果、显式开启touchDragZoom，并用toBlob异步导出避免base64开销。
-
ServiceWorker实现离线访问需满足注册激活、缓存策略与请求URL及Request.mode严格匹配；scope决定拦截范围，install阶段用cache.addAll()预缓存完整路径资源，fetch中按destination/mode分类响应，并注意credentials等匹配细节。
-
利用CSS自定义属性可高效实现主题切换，通过:root定义变量（如--color-bg）、var()调用、JavaScript切换类名（如theme-dark）重写变量值，并结合prefers-color-scheme适配系统偏好，提升用户体验。
-
使用伪元素和background-clip可模拟渐变边框并实现过渡动画，通过::before创建渐变层并用transform控制动效；2.单色边框过渡可直接使用border-color配合transition；3.box-shadow能模拟双色或发光边框并支持颜色过渡，适合轻量交互反馈。核心是借助伪元素或阴影弥补border-color不支持渐变的限制，根据设计需求选择合适方案。
-
crypto.randomUUID()是最简洁安全的UUID生成方案，符合RFC4122v4规范，仅限安全上下文且需现代浏览器或Node.js≥14.17.0；不支持时应分层降级，优先使用加密API。
-
加target="_blank"不安全，必须同时加rel="noopener"才能防止window.opener劫持；否则新页面可篡改原页面地址栏、DOM或拖慢性能，即Tabnabbing攻击。
-
掌握HTML5动画制作技能可通过五种路径变现：一、承接商业广告动画项目；二、销售可商用模板；三、嵌入激励视频广告的互动应用；四、提供技术培训服务；五、为SaaS工具开发动画插件。
-
使用两个inputtype="date"并结合JavaScript动态设置min属性，可确保结束日期不早于开始日期，同时推荐使用Flatpickr等库提升体验，并在后端校验数据；时区处理建议前端用ISO格式传参，后端统一用UTC存储，展示时再按用户时区转换。
-
浮动元素本身不直接导致文本选择困难，真正原因是其引发的层叠上下文错乱或意外覆盖，使鼠标事件落在非预期元素上；修复需创建BFC、合理设置z-index及避免干扰属性。
-
用Less变量定义全局box-shadow最稳妥，需加引号并用~@var插值；CSS自定义属性适用于运行时动态场景，二者定位不同，可共存但不自动同步；扩散范围宜用mixin封装，避免硬编码；Less变量无法被JS访问，导出需构建时处理。
