-
最简实现左右分栏拖拽需用resize:horizontal+overflow:hidden+display:flex，左栏设min-width、flex-shrink:0，右栏flex:1；需ResizeObserver监听左栏尺寸变化，用contentRect.width获取准确宽度。
-
background-colortransition失效主因是颜色值不可插值、状态未对齐或触发时机错误；需显式声明初始色值、在初始CSS中提前写死transition、用getComputedStyle或setTimeout避免JS跳变。
-
通用选择器适用于全局样式重置，如统一盒模型、清除默认边距、设置全局字体和调试辅助，但因高匹配频率影响性能，阻碍浏览器优化，建议限制使用范围或明确列出元素以提升效率。
-
Less中rgba()直接透传不处理，fade()在100%透明时输出transparent，hsla()同样透传不转换，推荐变量中直接使用rgba()字面量以确保渲染一致性和可维护性。
-
在线HTML工具网页版入口包括：https://www.htmledit.squarefree.com、https://html5-editor.net、https://codebeautify.org/htmlviewer，这些平台支持实时预览与编辑，提供左侧写代码右侧即时渲染的双栏界面，兼容HTML、CSS和JavaScript，适合初学者和临时开发；无需注册即可使用，界面简洁无广告，功能清晰，适配多设备；同时具备代码格式化、语法高亮、错误提示等功能，可自动美化代码并修复常见错误，提升编码效率。
-
HTMLHint专用于纯HTML静态分析，能检测doctype位置、标签配对、alt属性缺失、ID唯一性等ESLint及其插件无法覆盖的HTML专属问题。
-
stopImmediatePropagation()用于阻止同一元素上后续同类型事件监听器执行并阻止事件冒泡。它在需中断同元素多个监听器时生效，调用后仅影响绑定顺序在其后的监听器，已执行的不受影响，且不干扰preventDefault()。
-
顶部公告条需用position:fixed悬浮，body加padding-top避免遮挡，移动端适配box-sizing和内边距，localStorage持久化关闭状态，支持随机/轮播文案，兼容IE11与无障碍访问。
-
@layer是CSS用于解决样式覆盖混乱的分层机制，通过声明命名层（如@layerbase、components）按顺序控制优先级，避免!important和权重战，同层内仍遵循常规层叠规则。
-
fetch在现代浏览器中基本无需polyfill，但需警惕IE及老旧WebView；credentials:'include'是获取登录态的必要配置；fetch不自动rejectHTTP错误状态码，需手动检查res.ok；Worker中可用fetch但无progress事件且绕过ServiceWorker。
-
网页自动刷新可用<metahttp-equiv="refresh">实现定时全页重载，但不适用于SPA；JavaScript的location.reload()更灵活可控，适合条件判断与状态管理。
-
:empty只匹配完全不含任何子节点（包括空白字符）的元素；HTML中换行缩进产生的不可见文本节点会使:empty失效，需用开发者工具检查DOM树中的#text节点，或用JavaScript通过textContent.trim()判断视觉空状态。
-
设div背景色最稳妥用background-color，但需注意层叠顺序、透明度干扰及background简写会重置颜色；背景图需组合background-image、size、position三属性，多背景用逗号分隔并严格对齐参数。
-
使用CSStransform:translate()配合@keyframes可实现流畅卡片滑动动画。通过translateX()实现水平滑入，如从右侧滑入视图；结合opacity用translateY()实现垂直滑下；同时使用X、Y轴位移实现斜向移动；设置关键帧百分比与steps()函数可创建无限轮播效果；利用GPU硬件加速提升性能，添加will-change优化渲染，避免重排重绘，确保动画高效流畅。
-
浏览器按顺序检查source的type属性是否被支持且实际可解码，首个两者均满足的被选用；type缺失或错误会导致跳过该source，即使文件存在。
