-
HTML中输入真正空格需用 （不间断空格）或CSS的white-space:pre-wrap属性，前者适合单个空格控制，后者能完整保留空格、换行和制表符并允许折行。
-
必须给父容器加position:relative，因为absolute元素会以最近的已定位（relative/absolute/fixed/sticky）祖先为参考点；若父容器为默认static，则向上回溯至body或意外容器，导致定位错位。
-
使用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上，且仅作用于当前表单。
-
价格卡片应使用语义化标签：section包裹，h3标明套餐名，价格数字用span或strong加aria-label，周期文本用aria-hidden隐藏；等高布局首选flex；价格需Intl.NumberFormat本地化；角标须加aria-hidden；交互元素必有焦点样式。
-
BigInt是JavaScript中用于精确表示任意精度整数的原始类型，解决Number类型超出9007199254740991后精度丢失问题；需用后缀n或BigInt()创建，不支持小数、Math方法及JSON序列化，运算需同类型，ES2020起支持。
-
grid-template-areas是固定CSSGrid区域位置最直观可靠的方式，通过命名区域定义布局结构，各子元素用grid-area显式绑定对应名称，确保位置稳定且响应式易调整。
-
最常见原因是选择器未匹配到任何元素；应先用开发者工具Elements面板点击目标节点，检查Styles面板是否显示对应CSS规则，若未出现则说明选择器不匹配、元素不存在、拼写错误、大小写或连字符不符、伪类误用、特异性被覆盖、作用域隔离、加载失败或渲染被隐藏。
