-
在JavaScript中，直接赋值数组会创建引用而非副本，导致修改原数组时“副本”同步变化；使用展开运算符（[...arr]）、slice()或Array.from()等方法可实现浅拷贝，确保两个数组互不影响。
-
应使用inputtype="number"实现百分比输入框，仅存储纯数字（如85），通过CSS伪元素添加“%”视觉后缀，并配合min/max、step、aria-label等确保语义化、可访问性与数据准确性。
-
响应式卡片布局通过CSSGrid和Flexbox结合实现，Grid用minmax(250px,1fr)定义多列自适应外层结构，支持大屏4列、平板2列、手机1列；Flexbox以flex-direction:column管理卡片内部，使图片、文字、按钮纵向排列，其中文字区域设flex:1实现底部对齐，按钮固定底端；配合gap统一间距，并通过媒体查询优化移动端字体、内边距及隐藏非关键元素，提升小屏体验。
-
JavaScript不直接实现响应式，核心是CSS媒体查询和流式布局；JS仅补位处理CSS无法完成的动态行为，如资源加载、窗口监听、点击延迟修复等，应优先用matchMedia而非resize事件，避免硬编码断点像素值。
-
WeakSet适合做内部对象白名单，因其仅接受对象、不阻止垃圾回收、不可遍历且无size属性，可实现“存活即合法”的隐式契约；通过闭包封装提供allow/isAllowed接口，确保安全校验。
-
当用户点击屏幕上的虚拟按键后，再按物理键盘的空格或回车键，该按钮对应字符会被意外重复插入——这是由于<button>元素在获得焦点时，空格/回车会自动触发click事件所致。
-
该用margin控制元素与其他兄弟元素的距离，用padding控制自身内容与边框的空隙；误用会导致间距异常、热区失效或盒模型尺寸偏差。
-
优先选watch解决需比对新旧值的场景，如权限跳转、状态通知、表单校验；watchEffect适用于依赖动态、只需响应“有变化”的场景，如搜索建议。
-
scrollbar-color仅在Firefox（64+）中生效，Chrome、Edge、Safari等WebKit/Blink内核浏览器完全不支持，必须使用::-webkit-scrollbar伪元素系列实现等效效果。
-
默认CSS盒模型使width不包含padding和border，导致实际宽度超出；使用box-sizing:border-box可让width包含二者，推荐全局设置*{box-sizing:border-box}，并配合calc()、flex:1等避免溢出。
-
先设置border-collapse:collapse避免双线边框，再统一定义table,th,td的border样式；通过调整边框宽度、颜色和类型（如solid、dashed）美化表格，可单独设置th下边框或外边框突出表头。
-
用纯HTML+CSS实现链接卡片，必须以语义化<a>为外层容器并设有效href；内部用<h3>标题、<p>描述、<spanclass="domain">域名及带onerror兜底的<img>加载favicon；CSS统一border-radius:8px，用box-shadow和font-weight实现hover反馈，并强制a:focus-visible{outline}保障可访问性。
-
优点： 简单快捷">
CDN引入适用于简单项目，通过link标签引入CSS，如ElementPlus；2.npm安装后全局引入，便于版本管理；3.按需引入推荐用于大型项目，结合插件自动导入组件及样式；4.使用SCSS变量定制主题，先定义变量再引入组件库样式，实现个性化主题。选择方式应根据项目规模与性能需求决定。
-
采用BEM命名法规范类名，按模块拆分CSS文件，使用scoped隔离样式，避免深层嵌套与全局污染，提升可维护性与性能。
-
Map和Set在JavaScript中提供高效数据操作。1.Map支持任意类型键、避免命名冲突并保持插入顺序，适用于对象键存储、缓存等场景；2.Set自动去重，可用于数组去重、集合运算及状态标记；实际应用如缓存异步请求、去重事件监听器，提升代码安全性与可读性。
