-
div只是无语义、无默认样式、不自动撑开或居中的空块级容器；需手动设置width/height/margin/flex等CSS才能实现布局效果，语义化标签优先，嵌套宜浅。
-
直接用::after伪元素比overflow:hidden更可靠，因后者会意外裁剪绝对定位子元素、遮挡阴影或干扰动画，而伪元素仅作用于浮动上下文；IE8+兼容的.clearfix混合器需用单冒号、content:""、display:table及clear:both。
-
ChromeDevToolsCoverage面板仅统计实际加载执行的JS/CSS资源，不统计HTML文件本身；内联脚本/样式计入覆盖率，但HTML中的未触发资源（如hidden元素内联代码、懒加载脚本）不会被覆盖，需手动模拟全用户路径操作以提升统计准确性。
-
富文本场景下服务端HTML过滤不可省略，PHP必须用HTMLPurifier或XssHtml类做最终净化，前端DOMPurify仅作体验优化；需配置白名单、禁用危险协议、显式禁止script等标签，并在入库和渲染时双重净化。
-
PostCSS是构建时工具，必须集成于Webpack/Vite等构建流程，无法在HTML中直接运行或浏览器端实时处理；其作用是在编译阶段将CSS规则静态注入HTML的style属性或生成CSS文件。
-
BootstrapModal必须配合JS才能实现完整交互功能，仅HTML+CSS无法自动弹出、加遮罩或管理焦点；最小结构需包含modal容器、dialog、content三部分并设唯一id；常用问题包括未引入bootstrap.bundle.js、触发按钮属性缺失或ID错误；自定义样式推荐使用CSS变量以兼容JS行为。
-
纯CSS动态彩虹边框的关键原理是用conic-gradient生成360°色环作背景，配合background-clip:padding-box与padding模拟边框，通过CSS变量控制起始角度实现旋转动画。
-
inline元素有盒模型但受限生效：content、水平padding/border/margin有效，垂直方向属性不参与布局；vertical-align关键因默认基线对齐易错位；需完整控制时应改用inline-block。
-
viewport标签必须正确设置width=device-width和initial-scale=1.0，否则vw/vh基于错误视口计算导致横滚、字体模糊、点击不准；需配合clamp()、vmin及内容溢出控制才能实现真正适配。
-
约瑟夫问题的核心逻辑是：在一个环形结构中按固定步长循环计数并逐个淘汰，直到剩下最后一个人；在JavaScript中，使用数组模拟虽直观但性能较差，因为splice操作的时间复杂度为O(N)，导致整体复杂度达O(N²)；而更高效的数学解法基于递推公式f(n,k)=(f(n-1,k)+k)%n，时间复杂度为O(N)，可快速计算出幸存者位置，适合大规模问题。
-
命名应采用“前缀+功能+状态”组合（如user-profile-card），避免通用名冲突；scoped样式对动态DOM和第三方slot无效，需手动加唯一class或用CSS-in-JS；后代选择器易失控，推荐单一class或一级BEM嵌套；媒体查询和伪类须包裹在组件class内以防全局污染。
-
columns错乱因按高度切分内容而非子元素分栏，导致空白、列高不齐；真瀑布流需每列独立生长，CSS原生仅Firefox支持masonry，全兼容需MasonryJS库。
-
fixed导航栏遮挡锚点内容是因浏览器将目标元素顶部对齐视口顶部，而scroll-padding-top（设于html）可精准偏移滚动终点，仅影响滚动逻辑不破坏布局，Chrome89+/Firefox90+/Safari15.4+原生支持。
-
FetchAPI更简洁但默认不带Cookie，需显式设置credentials；不自动处理HTTP错误和超时，需手动检查response.ok并用AbortController控制；非JSON响应需调用对应解析方法；IE不支持fetch，兼容场景应优先选XMLHttpRequest或axios。
-
答案：通过Edge浏览器F12开发者工具可快速定位元素并实时调整HTML与CSS。依次启用工具、选择元素、编辑样式、增删节点，并复制修改结果至源文件，实现高效网页调试与优化。
