-
position:sticky是最轻量的吸顶方案,现代浏览器(Chrome56+、Firefox59+、Safari13.1+)原生支持,但IE不支持,iOS13.0及更早版本存在渲染异常;需用CSS.supports检测并降级JS实现,注意父容器约束、scroll节流、内存泄漏防护及touchmove兼容。
-
:empty伪类用于选择无子元素或内容的元素,可隐藏空提示容器、标识表格空单元格、设置动态内容占位符;需注意其严格判定规则,仅匹配完全空白的元素,含空格、换行或注释均不匹配。
-
CSS的aspect-ratio用于容器宽高比锁定,需配合width/max-width使用,不兼容旧版Safari时可用padding-top百分比降级;img的width/height提供固有尺寸防布局偏移,须与object-fit配合控制图片填充方式。
-
使用::before伪元素配合:hover实现悬停显示图标,通过opacity控制显隐并添加过渡动画,同时用padding-left预留空间、top+transform垂直居中,纯CSS无侵入式方案。
-
用position:fixed可纯CSS实现弹窗,通过checkbox控制显隐:遮罩层fullview固定定位,弹窗用top:50%/left:50%/transform居中,z-index分层,label模拟开关,兼容性好且无需JS。
-
本文详解React中“子传父”数据流的正确实现方式,通过useState提升状态至顶层组件,并逐层向下传递setter函数,解决props.setSelectedCategoryisnotafunction等常见错误。
-
原生Date够用但易出错;Moment.js已停更,新项目应避免。推荐date-fns(轻量、不可变、tree-shakable)或luxon(强时区支持),并统一团队时间语义认知。
-
浮动元素右侧文字紧贴边缘出现视觉缝隙是因浏览器按规范将文字基线对齐至浮动元素底部所留垂直空间,并非bug;应优先用vertical-align配合display:inline-block,或微调margin-bottom(-2px起),避免误用clear/overflow,现代项目推荐Flex/Grid替代。
-
原型链的本质是对象的__proto__指向其构造函数的prototype;它构成属性查找的引用链,终点为Object.prototype.__proto__===null,class继承和手动模拟均基于此机制。
-
浮动元素脱离文档流导致父容器高度塌陷,clearfix技术通过伪元素::after配合clear:both使父容器感知浮动子元素,标准写法为.clearfix::after{content:"";display:table;clear:both}。
-
Flex容器子元素侧轴未撑满,主因是align-items:stretch被覆盖或失效;需确保父容器为flex、子元素无固定宽高及align-self覆盖,且替换元素设height:auto等。
-
用<inputtype="file">实现头像上传前预览,需监听change事件,校验event.target.files[0]存在且为图片,用URL.createObjectURL()生成临时URL赋给<img>的src,预览后调用URL.revokeObjectURL()清理内存。
-
答案:基于Node.js构建实时日志分析系统需实现采集、处理、推送与存储。1.通过Express接收HTTP日志或监听文件流;2.解析日志并匹配规则,如检测error级别触发告警;3.利用WebSocket实时推送给前端;4.存入MongoDB等数据库供查询分析。
-
transition仅适用于状态变化,无法实现循环动效;持续自动动画必须用@keyframes配合animation属性,通过定义关键帧、设置animation-name、duration、iteration-count等控制循环播放。
-
需要清除浮动是因为浮动元素脱离文档流,导致父容器无法正确计算高度,从而引发布局塌陷。在多层卡片布局中,每层使用float排列卡片时,若不及时清除浮动,父容器高度为0,影响后续内容排版。推荐通过为每层卡片容器添加clearfix类并利用::after伪元素清除浮动,或设置display:flow-root触发BFC以隔离内部布局。这两种方法能有效包裹浮动子元素,保持各层结构独立稳定,避免错位,且代码简洁、兼容性好。实际应用中应确保每一层浮动容器均独立处理浮动,防止问题累积放大。