-
Grid布局中侧边栏固定宽度+主内容自适应最稳方案是grid-template-columns:240px1fr；头部高度需显式声明grid-template-rows；gap不继承，子容器须单独设置；IE11禁用fr和subgrid。
-
微信网页分享必须通过JS-SDK签名调用，不可直接使用window.WeixinJSBridge；需后端用指定URL（不含hash）、nonceStr、timestamp、jsapi_ticket生成SHA1签名，前端config后在ready中调用updateAppMessageShareData等接口，且link须与签名URL同源同路径、图片需HTTPS及≥200×200px，本地localhost无效，仅限公众号后台配置的JS安全域名。
-
overflow与position结合使用时需注意裁剪和定位规则：1.overflow:hidden会裁剪absolute元素，影响下拉菜单显示；2.overflow:clip限制fixed元素范围，使其相对祖先而非视口定位；3.absolute容器可通过overflow-y:auto实现内部滚动；4.避免因层叠上下文错乱导致的渲染问题，合理调整DOM结构与样式优先级。
-
vertical-align用于控制inline或inline-block元素的垂直对齐，常见取值有baseline、top、middle等，适用于图片与文本对齐、表单布局等场景，需注意其仅对行内元素有效且受line-height影响。
-
::marker可直接替换列表项符号，仅作用于display:list-item的li元素，支持content、color、font系列属性，不支持margin等布局属性，需注意浏览器兼容性及list-style相关属性的互斥关系。
-
正确使用link标签需包含rel="stylesheet"、href指向CSS文件路径，建议放在head中确保样式优先加载，可结合media等属性优化适配不同场景。
-
aside标签仅适用于语义上可省略的弱关联补充内容，如兼容性说明或生平简介；用于工具栏或广告属高风险误用，应改用带ARIA属性的div或section。
-
Number.isSafeInteger只对number类型有效，字符串需先转数字再校验；超大数应优先用正则/^\d{1,16}$/过滤，或改用BigInt；JSON解析后应立即校验，避免精度丢失。
-
z-index不生效的主因是元素未定位或处于独立层叠上下文中；必须设置position且避免父级触发opacity、transform等新层叠上下文，否则子元素z-index仅在内部有效。
-
<hr/>标签是语义化主题分隔符，仅用于内容主题切换（如章节更替、视角转换），不可作视觉装饰；滥用会破坏可访问性与结构逻辑，样式须用CSS控制，禁止嵌套在<p>内。
-
通过JavaScript动态将scrollHeight设置为滚动位置，配合flex-direction:column布局，可确保消息容器内容新增时滚动条始终自动锚定至底部，实现类WhatsApp/微信的即时聊天体验。
-
首帧延迟需前后端协同测量：前端记录play()到loadeddata的时间差，后端记录RTSP连接建立至首个RTP包发出的时间戳；WebRTC方案实测可压至300–600ms。
-
在Safari中用appearance:none移除checkbox默认样式可行，但必须搭配::before或::after伪元素重绘且显式设置display:block（或inline-block），否则伪元素不渲染——这是Safari独有的坑。
-
HTML本身不提供视频转场选择面板，因其无内置转场库或图形界面，所有转场效果均依赖CSS动画、JS逻辑及视频元素叠加实现；浏览器仅解析video标签并执行CSS/JS，不理解“淡入淡出”等语义，更不会弹出预览菜单。
-
Object.is能区分+0和-0是因为其按IEEE754位模式严格比较，故Object.is(+0,-0)返回false；同时它使Object.is(NaN,NaN)为true，更符合相等直觉。
