-
浮动导致父容器高度塌陷，使背景图视觉错位；需用clearfix清除浮动、设background-origin为content-box或padding-box并配box-sizing:border-box。
-
需满足五项条件：一、用现代浏览器以.html/.htm扩展名打开；二、避免file://协议限制，建议本地服务器运行；三、声明UTF-8编码且保存为无BOM格式；四、确保HTML结构合法、含DOCTYPE声明、路径正确；五、启用JavaScript并排查控制台错误。
-
JavaScript内存泄漏指本该回收的内存未被GC释放，导致堆内存持续增长、页面卡顿甚至崩溃；常见原因包括意外全局变量、未清理事件监听器、未清除定时器、闭包持有大对象及DOM僵尸引用，需通过ChromeMemory面板检测并结合严格编码习惯预防。
-
直接给li设置:hover即可实现仅高亮当前项，无需父元素干预或JavaScript；关键是要确保li有明确背景、完整点击区域、足够样式优先级，并可添加transition实现平滑效果。
-
HTML5customElements.define()注册自定义元素须继承HTMLElement、名称含短横线；HTML4不支持自定义标签语义，仅作未知元素处理；主流浏览器兼容但有细节差异；相比div+class，customelement提供语义化、封装性与原生生命周期。
-
ArrayBuffer是内存中固定长度的原始字节缓冲区，需配合Uint8Array或DataView等视图操作；Blob是面向I/O的不可变二进制载体，用于文件、网络等场景，需通过arrayBuffer()或FileReader转换才能读取内容。
-
使用:nth-child设置奇偶行不同背景色，结合border-bottom和hover效果，可创建美观专业的表格样式。
-
可通过CSS的background-image属性设置HTML页面背景图，包括内联样式、内部样式表、外部CSS文件三种引入方式，并支持定位、裁剪、响应式适配等精细化控制。
-
empty()清空内容保留元素，remove()彻底删除元素及事件；根据是否需保留父元素选择方法。
-
JavaScript迭代器协议要求对象有next()方法，返回{value,done}对象；next()可多次调用、不传参（生成器除外）、不幂等；状态须封装在实例内；可迭代对象需实现[Symbol.iterator]。
-
Flex换行后最后一行间距不均，因gap只作用于相邻项；解决方法包括：①用justify-content:flex-start或center配合gap；②伪元素补位法；③改用Grid布局；④检查flex-basis和min-width防错位。
-
CSS选择器性能优化需减少回溯与遍历深度，优先从右向左匹配；避免通配符和属性选择器滥用；精简层级，用语义类名替代复杂选择器；慎用动态伪类；善用CSS变量与contain/content-visibility隔离渲染。
-
:checked伪类结合+相邻兄弟选择器可实现基于复选框或单选按钮状态的视觉切换效果，如开关、手风琴菜单和内容显隐。其原理是:checked作用于选中的input[type="checkbox"]或input[type="radio"]，+选择紧跟其后的兄弟元素，从而控制样式显示。例如通过#toggle:checked+label+.content控制.content的display属性实现内容切换；在折叠面板中利用max-height和transition实现动画效果。关键点包括：目标元素必须为后续相邻
-
首先创建HTML结构包含触发按钮和模态表单，再通过CSS设置模态隐藏、居中显示与动画效果，最后用JavaScript控制模态的打开、关闭及表单提交，实现完整的交互功能。
-
使用Grid和Flex布局可高效实现响应式图片文字叠加效果，通过Grid定义容器结构并设置背景图适应尺寸，利用Flex对齐文字内容，结合媒体查询调整不同屏幕下的样式，确保可读性与视觉平衡，同时注意背景覆盖、文字对比度及指针事件处理等细节以提升用户体验。
