-
click事件在mousedown和mouseup之后触发，且仅当两者发生在同一元素、时间短、无显著移动时才触发；常见不触发场景包括移出元素松开、长按、disabled状态或preventDefault干扰；mousedown适合即时响应，click适合语义化操作。
-
移动端优先不是强制规范，但它是当前最可靠的响应式实施路径，核心是默认样式适配320px最小视口，通过min-width断点递进扩展，避免max-width覆盖导致的样式冲突与维护难题。
-
ChromeDevTools断点调试应按需选用：普通行断点查逻辑执行，条件断点避循环停顿，XHR/fetch断点捕获异常请求，DOM断点定位非法修改；辅以console.trace()、console.table()和debugger提升排查效率。
-
transitionend在CSS过渡动画最后一帧完成时触发，非开始或样式生效时；若过渡被取消、中断或无视觉变化则不触发，且需兼容webkit前缀。
-
Object.keys()方法用于获取对象自身所有可枚举的字符串属性名，并以数组形式返回。①它仅包含自有属性，忽略原型链属性；②只返回可枚举属性，不可枚举的不会被包含；③不包括Symbol类型的属性名；④处理非对象类型时，基本类型值会被包装成对象，null和undefined会抛出错误。与for...in循环不同，Object.keys()更精确、可控，适合现代开发习惯。其他相关方法如Object.values()获取属性值，Object.entries()获取键值对，Object.getOwnPrope
-
dragover事件必须阻止默认行为，否则drop不会触发；drop中读取文件应使用e.dataTransfer.files而非e.target.files；跨域拖拽时dataTransfer为空；移动端不支持原生drag/drop文件操作。
-
order属性用于Flexbox布局中控制子元素的排列顺序，数值越小越靠前。默认值为0，通过设置不同数值可改变视觉顺序，如order:-1的元素排在最前。使用时需将父容器设为display:flex，仅对直接子元素生效，不影响DOM结构和屏幕阅读器顺序，适用于响应式设计中的布局调整，但应注意可访问性和语义化结构，避免过度依赖。
-
object-position在<img>上无效是因为它仅对替换元素生效且必须配合object-fit使用；单独设置无效，需显式指定object-fit:cover/contain/none才能激活定位功能。
-
text-align用于块级元素内行内内容的水平对齐，如left、center、justify；vertical-align用于行内或表格元素的垂直对齐，如middle、top，二者不可混用，常配合display:table-cell或line-height实现居中效果。
-
input:focus不生效主因是元素未获焦点或样式被覆盖；需确保可聚焦、禁用outline:none误删、用:focus-visible区分操作方式、:focus-within处理嵌套、适配移动端特性。
-
需将label与input同级并置于relative容器内，label设absolute+top:-24px且前置DOM，禁用input的z-index；移动端键盘弹出时须JS切换fixed定位并动态计算位置。
-
本文详解如何通过CSSFlexbox与媒体查询，将网页精准划分为左右两个自适应区域，并确保在移动端自动堆叠，兼顾语义结构、可维护性与响应式体验。
-
最简呼吸边框用box-shadow+@keyframes实现：通过模糊半径与透明度周期变化模拟呼吸，推荐3sease-in-out动画、rgba颜色值；兼容性差时降级为outline+opacity；交互响应需切换动画名；多元素同步须统一animation-delay。
-
用aspect-ratio实现圆形标签需兼顾文字自适应与兼容性：设aspect-ratio:1/1和border-radius:50%，配合font-sizeclamp()、flex居中、box-sizing:border-box，并为旧浏览器降级使用padding-top:100%或固定尺寸。
-
波纹效果本质是伪元素+动画+transform，用::after生成圆形遮罩并scale放大，Sass统一控制变量，JS触发is-rippling类实现交互。
