-
text-overflow:ellipsis实现单行文本优雅截断需同时设置white-space:nowrap、overflow:hidden和明确宽度；多行截断需用-webkit-line-clamp、JS或服务端处理。
-
mix-blend-mode属性使元素内容与背景色或背景图混合，需父级有背景且元素无遮挡，通过设置如screen或multiply模式实现文字与背景融合，结合透明度和isolation控制层级，可创建通透、发光或融入图像的视觉效果。
-
双向绑定核心是建立“数据↔元素值”的可追踪连接，通过Proxy/Object.defineProperty劫持数据、监听DOM事件实现自动同步。Vue2用defineProperty，Vue3用Proxy，React主张单向流，Svelte编译时处理。
-
clamp()做响应式字号不“断层”的关键是三参数协同：最小值用固定单位（如1rem），首选值用流体单位（如2.5vw），最大值用相对单位（如3rem）形成有界弹性，避免全vw或错误混用@media。
-
watch本身不负责持久化，需配合localStorage等实现自动同步表单：监听字段变化、防抖写入、JSON安全序列化、页面加载时恢复、支持手动清除及敏感字段控制。
-
直接修改element.type='text'是最安全的密码框明文切换方式，兼容所有现代浏览器及IE11，需避免setAttribute、重复赋值、innerHTML替换，并同步焦点、aria-pressed与密码管理器识别。
-
移动端页面拖拽是浏览器默认的弹性overscroll行为，根本原因是滚动容器无真实内容时触发；推荐用overscroll-behavior:none精准拦截，兼容旧版需结合preventDefault与position:fixed方案。
-
构造函数继承通过call或apply在子类中调用父类构造函数，实现属性独立拷贝、支持向父类传参、避免原型链共享副作用，确保实例间数据隔离。
-
gap属性不生效的首要原因是父容器未设置display:flex或display:inline-flex；gap仅在Flex和Grid布局中有效，若父元素为block等非Flex显示模式则完全无效。
-
JavaScript中可通过Set对象结合数组方法实现集合的并集、交集、差集和对称差集；Set是ES6引入的唯一值集合，支持去重和基本增删查操作，但缺乏内置的集合运算方法，需手动实现。
-
transform:translate(-50%,-50%)偏移是因为以元素左上角为基准且依赖动态尺寸；Flexbox居中更稳但需父容器有明确高度；Grid的place-items:center对未知宽高最可靠。
-
fixed定位返回顶部按钮本质是相对于视口定位，通过top/bottom与left/right组合设定锚点；右下角标准写法为bottom:24px、right:24px，需设宽高、z-index:999、aria-label，并用requestAnimationFrame节流滚动监听，过滤iOS回弹异常值。
-
FileAPI仅用于浏览器端读取本地文件，不上传；上传需用fetch或XMLHttpRequest，推荐FormData+fetch方式，避免base64转换；大文件宜用readAsArrayBuffer()或流式处理；进度监听需用XMLHttpRequest；前端校验仅为辅助，须结合size、type与扩展名。
-
本文详解如何利用Tailwind的justify-between工具类，在Flex容器中将两个子元素分别精准定位至父容器的最左端和最右端，避免常见类名误用（如justify-start/justify-end单独使用无效），并提供可直接运行的代码示例与关键注意事项。
-
Less中用::-webkit-scrollbar写Mixin无效，因其是CSS伪元素规则而非普通选择器，需用&锚定父选择器（如&::-webkit-scrollbar）确保顶层结构；传参不可含伪元素语法，且Firefox/IE不支持，Mac和移动端亦受限。
