-
浮动元素末尾塌陷的根源是父容器高度塌陷，而非单纯外边距问题；应优先用clearfix、overflow:hidden或改用flex/grid布局来治本，calc()和:nth-child仅属临时补救。
-
Materialize组件交互异常的最常见原因是JavaScript初始化未执行或资源未正确加载；需确保jQuery在MaterializeJS前加载、CSS在JS前引入，DOM就绪后调用M.AutoInit()或按需初始化，并验证HTML结构符合官方规范。
-
本文详解响应式字体适配的核心问题：未设置viewport元标签会导致移动设备强制缩放，使rem基准失真；通过添加正确的viewport声明并结合现代CSS技术（如clamp()、vw单位或媒体查询），可实现跨设备一致且优雅的字体缩放。
-
:active不生效主因是移动端300ms延迟、元素不可聚焦或样式被覆盖；应加touch-action:manipulation、tabindex，将:active置于:hover后，用transform替代颜色变化，并兼顾键盘操作。
-
background-clip是控制元素背景绘制区域边界的CSS属性，决定background-color和background-image在border-box、padding-box、content-box或text范围内渲染，仅影响背景显示范围，不改变盒模型或子元素样式。
-
CSS盒模型只有标准盒模型和IE盒模型两种，标准模型中width/height仅指内容区，总宽=content+padding+border；IE模型中width/height包含content、padding和border，内容区自动收缩；通过box-sizing属性切换：content-box为标准模型，border-box为IE模型。
-
应避免用@import加载动画库，因其会阻塞CSS解析；推荐按需导入animate.css的特定动画文件或自建轻量动画库以减少体积和重绘压力。
-
:focus-visible仅在键盘导航（如Tab）触发焦点时生效，鼠标点击或JS调用focus()默认不激活；需与:focus共存并后置声明，且须为键盘用户保留可见焦点提示。
-
dir属性仅翻转行内文本视觉顺序而不改变块级布局流，需配合CSS的direction和unicode-bidi实现可靠双向文本支持，且影响可访问性与:dir()伪类匹配。
-
VueDiff算法遇相同key节点会抛警告并覆盖渲染，因key是vnode唯一标识，用于DOM复用和生命周期管理；重复key导致状态错乱，须确保同级vnode中key唯一。
-
拖放API通过dragstart、dragover、drop等事件实现交互，在dragover中阻止默认行为可触发drop；利用dataTransfer传递数据，结合视觉反馈与自定义图像提升体验，适用于列表排序与跨容器拖拽场景。
-
动态切换HTML5音频需先改src再调load()，否则不重载；建议pause()后操作，用canplaythrough事件判断可播，preload="none"节省资源；iOS/微信需用户手势触发首次播放。
-
使用type="password"可创建密码输入框，通过小眼睛图标用JS切换显示隐藏，结合HTTPS、长度限制和确认框提升安全与体验。
-
用classList.toggle切换sidebar-open类控制侧边栏展开/收起，CSS通过width过渡实现动画，JS绑定按钮点击事件即可，简洁可靠。
-
相对定位父元素配合绝对定位子元素可实现精准布局，子元素依据父元素边界定位，常用于角标、下拉菜单和模态框等场景，需注意父元素必须设为relative以避免定位漂移。
