-
浮动容器中混用浮动与非浮动子元素会导致布局错乱，因浮动元素脱离文档流；解决方式有三：1.非浮动子项加clear属性；2.父容器用伪元素清除浮动；3.将非浮动项移至独立容器并清浮。
-
Symbol通过创建唯一属性键避免命名冲突，确保扩展内建对象时的唯一性和未来兼容性，其非枚举特性提升代码可维护性与可读性，同时需注意误用Symbol.for、序列化丢失及过度依赖等问题，最佳实践包括使用描述性名称、避免直接修改原型链并做好文档说明。
-
JavaScript通过HistoryAPI实现无刷新路由控制，核心是pushState添加、replaceState替换历史条目，并通过popstate事件响应导航，需手动更新视图。
-
使用CSSGrid结合grid-auto-flow:dense可高效实现等间距瀑布流布局，1.将容器设为display:grid；2.使用repeat(auto-fill,minmax(200px,1fr))定义自适应列；3.设置grid-auto-rows:auto使行高随内容变化；4.启用grid-auto-flow:dense实现密集填充以减少空白；5.通过gap:16px统一行列间距；该方案利用Grid二维布局优势，相比浮动或Flexbox能真正实现错落有致的视觉效果，且无需JavaScript干
-
FetchAPI是广义Ajax的一部分，非XMLHttpRequest替代品；它返回Promise但不自动拒绝4xx/5xx错误，需手动检查response.ok；POST传JSON需设Content-Type并JSON.stringify；不支持同步请求、上传进度事件和内置超时，需AbortController实现。
-
使用grid-template-areas可直观定义页面布局。1.设置Grid容器，通过字符串定义三行两列结构：header占首行，sidebar与main居中，footer在底部；2.子元素用grid-area分配对应区域；3.响应式下重排为单列并隐藏sidebar，提升移动端体验。命名需一致以确保正确渲染。
-
媒体查询断点应匹配真实设备逻辑并分层设置（如320px、480px、768px等），配合rem实现字号与间距自适应，优先使用Flexbox/Grid布局，确保viewport正确设置，并区分核心响应对象与视觉细节。
-
背景色叠加变暗的本质是子元素遮盖父元素导致背景裁剪，或半透明背景使父背景透出形成混合效果；误用多层background、opacity或跨主题复用rgba值会加剧该问题。
-
零基础做网页应从写出可访问、能打开、带样式的最小HTML5页面开始：包含<!DOCTYPEhtml>、<htmllang="zh-CN">、<head>（含<metacharset="UTF-8">和<title>）、<body>四部分；CSS用外部style.css文件通过<link>引入；优先掌握<header><nav><main><f
-
:focus-within失效的常见原因包括子元素不可聚焦、pointer-events:none阻断事件、click中preventDefault/stopPropagation干扰焦点、纯CSS无法区分聚焦目标、iOSSafari兼容性问题。
-
答案：HTML5中<section>用于语义化划分文档章节，提升SEO与无障碍访问。它代表有主题的独立区块，需带标题，适用于如“公司简介”等功能分区；区别于<article>（独立内容）和<aside>（辅助内容），应避免滥用，仅在内容成章且可命名时使用，以确保结构清晰、机器可读。
-
后代选择器.my-classdiv匹配所有嵌套层级的后代div，而子选择器.my-class>div仅匹配直接子元素，更安全；:scope可限定JS查询上下文，但独立CSS中无效；还需防范优先级覆盖与继承污染。
-
X-ray本身不支持直接抓取兄弟节点构成的逻辑区块，但可通过jsdom预处理HTML，将散列的<h2>及其后续同级内容动态包裹为独立容器，再用X-ray按标准父子结构解析，最终得到符合预期的sections数组。
-
在<form>标签上添加novalidate属性即可彻底禁用HTML5原生验证，它会阻止required、type="email"、pattern等所有内置校验及提示；该布尔属性不支持写在input上，且仅作用于当前表单。
-
ZTE机型适配需动态设置viewport、校验rem基准、同时监听touch/pointer事件、显式处理dpr及禁用passive；单一方案无效，必须联动UA解析、dpr监听与viewport重写。
