自定义单选/复选框样式的核心在于利用CSS的:checked伪类控制相邻label样式。1.HTML结构上确保input与label关联，用for和id属性绑定或嵌套；2.隐藏原生控件推荐使用opacity:0等不影响可访问性的方法；3.使用label内的span元素绘制自定义样式；4.利用:checked状态结合相邻兄弟选择器改变指示器外观；5.提供焦点状态提升键盘导航体验。此外，需兼顾可访问性，包括正确关联label与input、避免display:none、添加ARIA属性等，从而实现视觉统一、交互

本文详解如何用background-image替代<img>标签配合CSSGrid布局，从根源规避因图片加载、字体渲染和内容尺寸未定义导致的CLS问题，显著提升CoreWebVitals分数。

<p>动态元素应优先用data-*属性或属性选择器定位，避免依赖不稳定的class；事件代理配合class切换是主流方案；ShadowDOM需用:host或::slotted；SSR和渲染时序问题需用requestAnimationFrame等兜底。</p>

Flexbox通过display:flex、flex-direction:row、justify-content、flex-wrap:nowrap及子项flex属性实现元素横向排列。

相对定位通过position:relative使元素相对于原位置偏移且保留原有空间，利用top、left等属性调整位置，常用于微调布局、作为绝对定位的包含块或配合z-index控制层级。

gap是Flex和Grid布局中原生控制相邻项目间隙的属性，避免首尾空白和margin合并问题；支持gap、row-gap、column-gap，现代浏览器广泛兼容，可配合@supports降级。

深拷贝和浅拷贝的核心区别在于对引用类型处理方式不同：浅拷贝仅复制第一层属性，嵌套对象仍共享内存地址；深拷贝递归复制所有层级，生成完全独立的新对象。2.浅拷贝适用于单层对象，常见方法包括Object.assign()、扩展运算符、slice()和concat()，但均无法处理深层嵌套或特殊类型。3.深拷贝需递归遍历并创建新容器，手动实现时应判断数据类型、处理循环引用（如使用WeakMap）。4.JSON.parse(JSON.stringify(obj))虽简便，但会丢失函数、undefined、Symbo

当为表单绑定submit事件时，直接访问formElement.value会返回undefined，因为form元素本身没有value属性；必须通过querySelector单独获取内部input元素并读取其.value。

overflow:hidden直接裁剪内容且不显示滚动条，适用于装饰性溢出；overflow:auto仅在溢出时显示滚动条，overflow:scroll始终强制显示；Flex/Grid中需配合min-width:0等防止容器被拉伸导致overflow失效。

本文介绍一种高效、可扩展的方法，将具有相同数字后缀的键（如lote0与loteQnt0）自动配对，并生成标准化的对象数组（如{name:'jg',value:'jgvalue'}），避免硬编码分组逻辑。

align-items用于父容器统一设置子元素在交叉轴的对齐方式，如center居中、flex-start顶部对齐；align-self作用于单个子元素，可覆盖父级设定，实现特殊对齐。例如.card-container设置align-items:center使所有子项居中，而.highlight.title使用align-self:flex-start让标题单独上移，形成视觉区分。两者结合可灵活控制布局对齐，提升页面设计自由度。

TypeScript通过静态类型检查增强类型安全，即在代码运行前分析类型标注、函数调用和接口匹配，利用类型注解、推断与擦除机制，在编辑器中实时反馈错误，不改变JS运行行为。

Array.prototype.sort()默认按字符串Unicode码点排序，非数值大小；ES2019起要求稳定排序，但需规范比较函数且返回数字，否则稳定性无保障。

z-index不生效主因是元素未定位或父容器创建了新层叠上下文；需确保position为relative/absolute/fixed/sticky，且避免opacity<1、transform非none等触发隔离。

直接修改placeholder属性值是最常用且安全的方式，需写在input标签内并用双引号包裹，如placeholder="搜一搜商品、品牌..."；CSS仅能通过伪元素调整样式，JS动态修改需确保DOM加载完成。