-
答案：通过设置初始边框和transition属性可实现border-width平滑过渡，避免使用border:none导致动画失效。
-
本文介绍在使用RxJS的combineLatest时，如何通过distinctUntilChanged过滤掉与上一次完全相同的数组发射值，实现“仅当任一源值变化时才触发订阅”，避免冗余处理。
-
直接用::before和::after写tooltip易错位，因top/left等定位值未与方向解耦，硬编码导致改方向需手动调所有偏移；正确做法是用Lessmixin封装方向参数，通过条件分支控制transform、margin及border组合，并确保父容器设position:relative。
-
用CSSGrid实现勋章墙需设display:grid、grid-template-columns:repeat(auto-fill,minmax(120px,1fr))、gap:12px；勋章容器用flexcolumn居中内容；遮罩须挂body下并合理设置z-index；动态加载后需强制重排。
-
答案：针对浏览器兼容性问题，可通过HTML条件注释（仅IE5-9）、CSS@supports特性检测、JavaScript动态加载样式等方法处理；推荐优先使用@supports进行特性检测，结合Autoprefixer和渐进增强策略，确保样式兼容性与可维护性。
-
transition无效的主因是hover前后属性类型不匹配：需确保属性名一致、值类型可插值（如颜色/长度/opacity）、初始值非auto/unset，且避免使用display/visibility等不可过渡属性。
-
浮动元素需配合position才能生效z-index，关键在于同一层叠上下文中通过relative或absolute定位设置层级，避免父级opacity、transform等限制，推荐用flex或grid替代float布局以减少冲突。
-
CSS选择器是选中HTML元素并应用样式的桥梁，包括基础选择器（如标签、类、ID、通配符）和高级选择器（如后代、子元素、兄弟、属性、伪类、伪元素），掌握它们可提升样式代码的灵活性与可维护性。
-
小元素在行内布局中易挤在一起，因默认inline元素受字体基线和vertical-align:baseline影响，导致垂直对齐不一致；推荐用inline-block+vertical-align或flex+gap统一控制间距。
-
HTML中绘制细线分隔有五种CSS方案：一、border单侧设置；二、hr重置样式；三、box-shadow模拟；四、渐变背景；五、伪元素绘制，各适用于不同场景与设备需求。
-
this的值由调用方式动态决定，而非定义位置；obj.method()中this为obj，独立调用时非严格模式下为window/globalThis，严格模式下为undefined，箭头函数则继承外层普通函数的this。
-
直接修改HTML文件中的<footer>区域即可更新版权信息，需替换其中的©年份和公司名，注意保留©实体；若为JS动态生成，须修改对应脚本或删除；多页需批量替换或统一引用。
-
fr单位按剩余空间分配而非容器总宽，受padding、gap、min-width影响；响应式需用repeat(auto-fit,minmax(280px,1fr))；等高靠align-items:stretch或flex-column+margin-top:auto；IE11不支持fr，应降级为Flexbox。
-
box-shadow属性通过设置水平偏移、垂直偏移、模糊半径、扩散半径、颜色和inset实现元素阴影效果，常用于按钮悬浮、卡片立体化和内凹设计，合理调整参数可提升界面层次感与交互真实感。
-
GeolocationAPI可用于获取用户位置，适用于天气、地图等场景；使用时需用户授权且页面运行在HTTPS环境下；通过getCurrentPosition()获取一次位置，watchPosition()持续追踪，并可调用clearWatch()停止监听；需处理权限拒绝、定位不可用、超时等错误情况。
