-
使用: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对齐文字内容，结合媒体查询调整不同屏幕下的样式，确保可读性与视觉平衡，同时注意背景覆盖、文字对比度及指针事件处理等细节以提升用户体验。
-
HTML5音视频播放核心是格式转码与网页封装，需导出MP3+OGG音频、MP4+WebM视频，用FFmpeg等工具转码后通过<audio>/<video>标签嵌入，并兼顾兼容性、体积与浏览器策略。
-
优先使用<link>标签引入第三方UI库样式，因其能并行加载、提升渲染速度，并支持预加载；而@import会阻塞加载且需置于CSS开头，仅适合构建时的样式整合。
-
ES8（ECMAScript2017）聚焦提升开发效率与异步编程体验，核心新增async/await、Object.values()与Object.entries()、padStart()/padEnd()等实用特性，均已稳定支持主流环境。
-
Canvas绘制文字主要用fillText()和strokeText()方法，结合font、textAlign、textBaseline等属性设置样式与布局，支持阴影、渐变等效果，需先设样式再绘制。
-
用gap属性替代margin是解决按钮排列不均的最佳方案——它专用于Flex/Grid布局，统一控制子元素间距且不干扰盒模型；需确保父容器为flex或grid，移除按钮自身margin，并注意Safari14.1+才完全支持。
-
使用border-radius:50%可将正方形图片变为圆形头像，需设置等宽高、用object-fit或background-size优化显示效果，并注意图片比例与分辨率。
