-
min-content是内容不换行时的最小宽度,如英文最长单词或整段URL撑开的宽度;max-content是内容完全不换行所需最小宽,无视父容器限制,易致溢出。
-
实现导航栏下拉动画需结合CSS的transition与transform属性。1.构建HTML结构,包含主菜单与子菜单;2.通过CSS设置.dropdown-content默认opacity:0、visibility:hidden和transform:translateY(-10px),实现隐藏;3.利用:hover触发状态,使opacity:1、visibility:visible、transform:translateY(0),配合transition实现滑动淡入效果;4.可分离transition属
-
br仅强制换行无语义,p是语义化段落容器;br滥用导致结构混乱、可访问性差、SEO权重丢失;p自带默认间距且可样式控制,br无法独立设置间距;p必须闭合,br自闭合;误用br会损害屏幕阅读器导航与阅读模式兼容性。
-
最快弹窗用window.alert(),但仅限调试;正式环境推荐dialog元素(Chrome97+/Firefox99+/Safari15.4+)或手写modal;需处理焦点管理、ESC关闭、遮罩层交互及移动端适配。
-
对象属性必须按固定顺序初始化以保障V8隐藏类复用,乱序写入或条件赋值会导致隐藏类分裂、内存浪费与性能下降;Object.defineProperty无法弥补初始顺序缺失,class构造中应确保所有实例初始化全部属性。
-
浮动元素脱离文档流,不再为父容器撑高且不影响块级兄弟元素垂直位置;块级兄弟元素“上移”、内联内容“环绕”;父容器高度塌陷是规范行为,修复方式包括触发BFC、清除浮动或改用Flex/Grid。
-
闭包能有效解决异步脚本加载中回调挂载与执行顺序不一致的问题——通过将回调函数与对应脚本上下文绑定,为每个脚本创建独立作用域以保存专属回调和标识,避免因加载完成顺序不可控导致的调用错乱、参数覆盖或状态污染。
-
<p>Math.random()不安全、不可重现且易产生分布偏差,密码等场景须用crypto.getRandomValues();生成整数应使用Math.floor(Math.random()*(max-min+1))+min。</p>
-
autoplay必须与muted配合才生效,controls控制原生控件显示,muted影响初始音量,preload仅为提示,loop在iOS全屏下需playsinline才有效。
-
stroke-dashoffset动画卡顿的主因是路径长度未对齐,需用pathLength强制标准化单位;设pathLength="100"后统一按100计算偏移,禁用getTotalLength(),否则混用会导致节奏错乱。
-
直接循环appendChild会触发多次重排重绘,因每次向已挂载DOM添加节点都可能强制浏览器同步计算样式、布局和绘制;而DocumentFragment在内存中操作不触发渲染,仅一次性插入时执行一次重排重绘。
-
深度克隆是实现Canvas撤销/重做最直接可控的方式,通过每次绘制完成时对整个状态树做不可变深拷贝并压入undo栈;必须深克隆以防历史快照被后续修改污染,推荐用structuredClone()或JSON.parse(JSON.stringify())配合toRaw()剥离Proxy。
-
data-*属性转dataset键名时连字符变驼峰(如user-id→userId),值恒为字符串,须手动类型转换;修改需用setAttribute而非直接赋dataset;事件委托中应通过closest定位带data属性的祖先元素。
-
flex-direction不会因dir="rtl"自动翻转,必须显式设置row-reverse;justify-content:start随方向自动映射,flex-start则始终锚定物理起点;row-reverse仅反转视觉顺序,不影响DOM和可访问性。
-
BOM检测操作系统最常用方法是解析navigator.userAgent字符串。1.使用正则表达式匹配userAgent中的关键字,如"Windows"、"Mac"、"Android"等;2.优先判断更具体的关键词以避免误判,如先判断iPad再判断Mac;3.结合navigator.platform获取平台信息作为辅助;4.利用新兴的navigator.userAgentDataAPI获取结构化数据,兼容性不足时回退userAgent。此外,navigator对象还可提供语言、网络状态、设备内存、地理位置