-
HTML5盒子模型调试需掌握五种技巧：一、用box-sizing:border-box统一盒模型；二、margin负值配合绝对定位实现居中；三、padding-top百分比维持响应式宽高比；四、border与outline协同消除边框间隙；五、box-shadowinset模拟内边距。
-
应根据需求选择：:nth-last-child(2)按父元素末尾位置匹配倒数第二子元素（需类型一致），而:nth-last-of-type(2)先筛选同类型元素再倒数取第二，不受其他标签干扰。
-
ShadowDOM通过隔离DOM子树实现样式封装，内部样式不泄露、外部样式不穿透；推荐内联<style>，慎用!important和全局选择器，善用:host、::slotted和CSS自定义属性实现可控定制。
-
首先使用feh实现Linux桌面图片轮播，安装后指定图片目录并设置每5秒切换；再通过HTML+CSS创建全屏网页展示，利用JavaScript定时更换背景图；最后将两者结合，feh负责底层轮播，浏览器打开本地服务器上的HTML页面作为透明叠加层显示信息，实现动态桌面秀。
-
内联样式优先级最高，因其权值为1000且直接绑定DOM元素；误用场景包括替代reset.css、字符串拼接style、滥用!important；适用场景为动态值、服务端微调、DOM直操作；可被!important（外部）、CSS变量、ShadowDOM例外覆盖。
-
JavaScript通过getUserMedia采集音视频流，结合RTCPeerConnection实现WebRTC点对点通信，利用WebAudioAPI处理音频，通过RTCDataChannel传输任意数据，构建实时音视频应用。
-
动态创建DOM元素的核心是使用document.createElement()创建元素，再通过appendChild()或insertBefore()将其添加到DOM树中；2.设置元素的文本内容可用textContent或innerHTML（需注意XSS风险），属性可通过element.setAttribute()或直接赋值，样式通过element.style设置；3.常见挑战包括频繁DOM操作导致的性能问题、事件监听器未移除引发的内存泄漏、使用innerHTML带来的XSS风险、复杂结构导致的代码可维护
-
BOM是JavaScript与浏览器窗口交互的接口，由浏览器厂商实现，核心对象为window，包含location、history、navigator、screen等子对象及setTimeout、alert、open等方法，用于操作浏览器环境而非页面内容。
-
响应式导航栏通过Flexbox或Grid布局结合媒体查询实现多设备适配，使用CSS控制水平与垂直排列，配合JavaScript或纯CSS实现移动端下拉菜单，确保良好用户体验与可访问性。
-
rgba()的四个参数依次为红、绿、蓝三色强度（0–255整数）和透明度alpha（0–1小数）；与opacity不同，rgba仅作用于背景色，不影响文字及子元素。
-
首先获取用户位置，需处理权限与失败情况；再集成地图服务如GoogleMaps或高德，初始化地图并设置中心点；接着添加标记、信息窗和交互功能；最后适配多设备与网络环境，优化性能与体验。
-
引入CSS框架后表格样式冲突的解决方法有四种：一是用更具体的选择器提升特异性；二是谨慎使用!important；三是通过唯一class隔离作用域；四是检查并覆盖框架的reset/base样式。
-
合理设置margin可优化浮动布局间距。通过统一方向添加margin并用:last-child或:not()清除末项，避免错位；父容器使用负margin抵消子元素外边距实现内收效果；为防止垂直margin合并，应单侧控制间距，或改用padding、flex+gap替代，提升布局可控性。
-
外边距（margin）对绝对定位元素并非无效，而是不参与定位偏移计算；其作用限于盒内间距、背景起始位置及margin合并等，真正控制位置的是top/right/bottom/left属性。
-
父容器未启用Grid或语法错误会导致grid-column跨列失效。1.父元素必须设置display:grid；2.正确书写grid-column，如span2或1/3；3.grid-template-columns需定义足够列数；4.避免与flex、float等布局冲突，确保样式优先级正确。
