-
PWA核心在于ServiceWorker可靠接管请求、匹配场景的缓存策略及健壮的安装/更新逻辑。注册需在load事件中同步执行，缓存按资源类型选策略并带版本号，manifest关键字段缺一不可，更新需skipWaiting+controllerchange监听+手动清理旧缓存。442 收藏 -
导航栏fixed后内容被遮挡，需给body设置与导航栏高度一致的padding-top；移动端fixed不稳定时，可用touch-action:manipulation缓解抖动，避免在导航内放置输入框。442 收藏 -
懒加载核心是按需加载，推荐使用IntersectionObserverAPI实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。442 收藏 -
CSS中需用border-top等方向属性独立设边框，简写border会覆盖所有边；单边声明必须含style，否则为none；可用border-width等复合属性按TRBL顺序赋值；表格中用border-collapse:separate避免边框合并；outline和box-shadow可模拟伪单边效果但有局限。442 收藏 -
使用TailwindCSS的Flex和Gap工具类，可以快速构建灵活、响应式的布局，无需写任何自定义CSS。核心在于利用flex容器和gap间距类来控制子元素的排列与间隔。启用Flex布局通过flex类将一个元素变为弹性容器。默认主轴为横向（row），你可以根据需要调整方向。常见用法：flex：创建行内弹性容器flex-col：纵向排列子元素flex-wrap：允许换行justify-center：主轴居中对齐items-center442 收藏 -
JavaScript通过操作<audio><video>元素DOM接口控制音视频，核心是属性（paused、currentTime等）、方法（play()返回Promise）和事件（timeupdate、ended等），需注意加载状态与用户手势限制。441 收藏 -
通过grid-area定位网格项并结合background与border，可精准设置各区域视觉样式。1.使用grid-template-areas定义布局区域；2.为子元素指定grid-area并添加背景边框；3.可选伪元素增强装饰；4.响应式下样式随位置自动适配，保持一致性。441 收藏 -
JavaScript性能监控核心是PerformanceAPI，优先用PerformanceObserver捕获FCP、LCP、CLS等WebVitals指标，辅以performance.mark/measure自定义打点，通过sendBeacon上报并采样。441 收藏 -
使用float:left配合固定宽度（如width:20%）和box-sizing:border-box可实现列表项水平等距排列，需统一li样式并清除浮动防止父容器塌陷，推荐ul::after伪元素清除法，通过padding控制间距、white-space:nowrap防换行，确保布局整齐兼容旧浏览器。441 收藏 -
当在<router-link>上同时使用data-bs-toggle和data-bs-target时，Bootstrap的默认事件拦截会阻止VueRouter的导航行为，导致链接不可点击；本文提供兼容性修复方案，通过程序化控制Collapse实现路由跳转与导航栏收起的协同。441 收藏 -
JavaScript对象是无序键值对集合，键为字符串或Symbol，值可为任意类型（含函数即方法），本质是带行为的字典；{}字面量最常用且简洁，Object.create(null)创建无原型纯净对象，newObject()冗余少用。441 收藏 -
提取HTML中img标签的图片链接，尤其是兼容src和data-src属性，可以通过解析HTML文档并遍历所有
标签来实现。以下是一个使用Python的示例，展示了如何从HTML字符串中提取这些图片链接：✅ 示例代码（Python）from bs4 import BeautifulSoup html = '''
本文介绍在Python网络爬虫中，如何使用BeautifulSoup灵活提取img标签的图片URL，无论其使用src还是data-src属性，确保所有图片链接被一致、准确地获取为纯文本。441 收藏
属性选择器[attr^="value"]匹配属性值严格以指定字符串开头（区分大小写、不可有前置空格）；[attr$="value"]匹配严格以指定字符串结尾；[attr="value"]表示完全相等（含空格大小写），非包含匹配；子字符串匹配应使用[attr*="value"]。441 收藏
推荐用object-fit控制图片缩放裁剪：cover保持比例裁剪溢出，contain完整显示留白；需配合width/height或aspect-ratio生效，IE需fallback；容器应优先锁定宽高比，避免硬编码HTML尺寸；SVG等非位图需单独处理。441 收藏
用<img>标签加载GIF最简单兼容，但需注意尺寸性能；APNG/WebP动画支持透明但兼容性有限；大GIF应设宽高属性；自动循环慎用于移动端；播放控制需JS或<canvas>；SVG适合简单矢量动效；视频<video>更高效于复杂长动画。441 收藏
