-
应使用rgba()等颜色函数设置背景透明，而非opacity，因opacity会使子元素继承叠加透明度导致内容发虚；rgba()只作用于指定颜色属性，确保文字等内容保持完全不透明。
-
WebComponents中事件穿透需同时设置bubbles:true和composed:true；仅bubbles:true无法突破ShadowDOM边界，composed:true才允许事件抵达lightDOM或外层组件。
-
GPU加速在HTML渲染中默认开启但需满足可合成层条件才生效，关键看是否触发重排；transform和opacity等属性真正走GPU，而width、height等会引发重排导致GPU不参与计算。
-
Symbol.toPrimitive是实例级可配置方法，需在每个类中显式定义；应在基类封装\_getPrimitiveValue供子类覆写，并根据hint返回合适原始值，确保数学运算一致性。
-
mask-position动态变化无效是因为旧规范将其列为不可动画属性，Chrome115+/Safari16.4+才支持，Firefox仍不支持；应改用mask-image配合CSS变量和background-position模拟动画。
-
:invalid伪类可自动为未通过原生验证的表单控件（如required、type="email"等）添加红边框；需配合:placeholder-shown或:user-invalid延迟提示，并可用:valid提供绿色正向反馈。
-
必须为容器设置max-width并配合margin:0auto实现居中，否则大屏下正文行宽超120字符致阅读效率骤降；需确保元素为块级、避免误用margin:auto或max-width:100%等常见错误。
-
min-content是内容不换行时的最小宽度，如英文最长单词或整段URL撑开的宽度；max-content是内容完全不换行所需最小宽，无视父容器限制，易致溢出。
-
HTML仅是容器，真正实现消息推送需JavaScript的NotificationAPI（仅前端通知显示）和WebPush（需ServiceWorker+PushManager+后端支持）。
-
必填字段的红星不必强制用::after实现，但它是语义清晰、可访问性佳的最优解；应加在label上且仅对required字段生效，因input不支持伪元素；需用color和margin-left控制样式，确保无障碍兼容。
-
本文详解如何绕过TypeScript装饰器的编译时限制，通过手动调用__decorate函数，将自定义装饰器（如属性装饰器）动态应用到无法修改的第三方类（如classA）的指定属性上。
-
父元素高度塌陷是因浮动元素脱离文档流，解决方法是触发BFC（如overflow:hidden）或清除浮动（如::after+clear:both），现代布局推荐直接使用flex/grid。
-
scroll-behavior:smooth必须写在html元素上，因CSS规范限定其仅对根滚动容器生效；body滚动实为html滚动，加在body或其他元素无效，且不可被后代选择器或!important覆盖。
-
锚点跳转失效主因是id与href匹配细节或DOM状态异常：id须全局唯一且不以数字开头；href需为合法hash格式；目标元素须已渲染且可见；可用scrollIntoView()替代或监听hashchange手动滚动，并用scroll-margin-top解决吸顶遮挡。
-
改网页标题只有两种可靠方式：静态写在<head>里的<title>，或运行时用document.title赋值；其他操作均不保证生效，尤其影响SEO和历史记录。
