-
用SCSS@mixin封装border三角箭头，核心是守住width:0、height:0、三边transparent三条底线；方向由设色边决定（如top箭头用border-bottom），大小仅由对应border-width控制，简写覆盖会破坏斜接关系，必须显式声明四边样式。
-
:is()能大幅缩减嵌套选择器，因其原生支持“逻辑或”语义，避免重复父路径；如.card与.modal下的h2-h4可合并为:is(.card,.modal):is(h2,h3,h4)，且权重取内部最高值。
-
最稳解法是::after伪元素+transform:scaleY(0.5)，因CSS的1px在dpr=2设备上映射为2物理像素而显粗，缩放可精准落于1物理像素，但须配position:relative、transform-origin:0100%、pointer-events:none等防偏位。
-
VSCode调试HTML本质是调试浏览器中的JS，需通过Chrome/Edge启动并附加调试器；必须安装对应浏览器、配置launch.json（type:"pwa-chrome"）、确保HTML含可调试JS代码，且webRoot与file:///路径匹配。
-
mouseenter/mouseleave更可靠，因其不冒泡且仅在鼠标真正跨过元素最外层边界或完全离开元素及其后代时触发；推荐用addEventListener绑定，避免mouseover/mouseout引发的嵌套闪烁与状态错乱。
-
通过结合CSS的animation与box-shadow，可实现元素悬浮立体效果。1.先设置.card基础样式，包括圆角、背景色、默认阴影及过渡；2.使用@keyframes定义float-up动画，通过transform:translateY和box-shadow变化模拟升降；3.在.card:hover时触发动画，使元素视觉上“浮起”；4.优化建议：用transform避免重排，搭配will-change提升性能，移动端注意hover兼容性。合理控制动画节奏，增强交互真实感。
-
noUiSlider初始化必须先创建DOM容器并确保可见，再配置range、start、connect三项必要参数；样式通过覆盖内置class实现；事件需用on()方法绑定，不支持原生addEventListener。
-
对象属性遍历顺序非随意：V8将整数索引键（如1、"42"）存入elements区并按数值升序优先遍历，其余键存入properties区按插入顺序遍历；Symbol键排最后且保序。
-
伪类样式难维护的根本原因是交互状态与视觉样式耦合，导致逻辑分散、复用困难；应改用显式状态类（如.is-hovered）集中管理状态，配合JS事件控制，并分层使用伪类与状态类。
-
使用float和margin可实现图文混排。将img设置为float:left或right使文字环绕，通过margin调整间距，避免文字贴边；为防止布局错乱，需用clear:both清除浮动，推荐使用.container::after伪类清除，确保父容器高度正常，布局稳定。
-
应给图片外层容器设置aspect-ratio，再配合object-fit控制显示；直接设在img上无效，因img是替换元素，该属性无法触发布局约束。
-
推荐优先使用原生URL构造函数校验和解析URL，它自动处理编码、IDN和标准化，比正则更健壮；正则仅适用于轻量初步校验或提取协议与域名，但无法准确分离根域名，精确场景应使用psl等专用库。
-
用gap属性在父容器设gap:8px可均匀分隔按钮；IE不支持则用margin-right和:not(:last-child)；按钮宽度不一用flex:1均分或flex:00auto保留内容宽；移动端需足够padding和min-height保障点击区域；响应式需flex-wrap:wrap配合flex-basis计算列宽。
-
当scrollHeight>clientHeight时，垂直方向发生内容溢出；因scrollHeight含不可见内容高度，clientHeight仅为可见区域高度（不含边框/滚动条），差值即被裁剪像素数。
-
弹性盒子容器高度随内容变化是正常响应式特性，应使用min-height保底并允许自然撑开，配合flex-direction:column和gap等属性实现自适应布局。
