-
表格小屏错乱主因是渲染机制与响应式断点未对齐;需用table-layout:fixed+width百分比或colgroup控制列宽,配合min-width、overflow-x:auto及text-overflow截断。
-
掌握CSS水平居中需理解盒模型与宽度行为,主流方法有两种:1.使用margin:auto,适用于固定宽度的块级元素,通过设置宽度和左右外边距自动分配实现居中;2.使用Flexbox,父容器设为display:flex并配合justify-content:center,可灵活居中子元素,尤其适合动态或响应式布局。选择依据场景:简单居中用margin:auto,复杂布局选Flexbox。
-
transition能平滑改变padding和margin,实现按钮悬停、菜单展开等自然过渡效果,需明确指定属性、避免使用all和auto值,并注意布局重排影响性能。
-
使用transition:transform0.3scubic-bezier(0.4,0.0,0.2,1)统一控制位移与缩放过渡,避免属性不同步;配合cubic-bezier(0.34,1.56,0.64,1)等自然缓动曲线提升流畅度,禁用step()函数防止断裂;通过transform:translateZ(0)或will-change:transform启用GPU加速渲染,减少卡顿,确保动画连贯。
-
选Sass更适合中大型项目。因其模块系统更可靠、构建工具链支持更成熟、CI/CD更稳定、调试与类型提示能力更强,且社区维护更活跃;LESS虽上手快,但长期维护成本更高。
-
背景没撑满的根本原因是父容器计算高度为0px,常见于浮动、绝对定位或Flex/Grid子元素脱离文档流导致的高度塌陷,需通过BFC触发、明确高度设置或调整布局方式修复。
-
:checked伪类仅适用于checkbox和radio输入框,通过相邻/兄弟选择器控制关联元素样式,无法作用于select、option或自定义组件,也不支持跨层级或class模拟。
-
最常见错误是CSS用.class但HTML漏写class属性;其次混淆后代选择器(空格)与子选择器(>);再者误用:nth-child与:nth-of-type;还有属性选择器值含特殊字符未加引号。
-
JavaScript有7种原始类型和object引用类型;判断真实类型应避免typeof,改用Array.isArray()、Object.prototype.toString.call()等;隐式转换易出错,显式转换推荐String()、Number()、Boolean()。
-
form.reset()最快但仅还原初始值,非真正清空;动态添加字段无效;需手动遍历设空:checkbox/radio设checked=false,select设selectedIndex=0或selected=false,textarea设value=""。
-
HTML5内容嵌入有五种标准方法:一、iframe嵌入独立页面;二、object嵌入文档片段并支持脚本通信;三、embed嵌入多媒体资源;四、JavaScript动态注入HTML5结构;五、ShadowDOM封装隔离组件。
-
flex-direction决定主轴方向,影响justify-content和align-items的作用轴;column时justify-content控制垂直居中,align-items控制水平居中;需检查显式/隐式设置、父容器高度及align-self冲突,单子项可用margin:auto居中。
-
IndexedDB是W3C标准的客户端数据库,支持存储大量结构化数据,具备异步操作、事务机制、索引查询和大容量存储等特点,适用于离线应用与高性能前端场景。
-
1、安装LiveServer插件并右键选择“OpenwithLiveServer”可启动本地服务器实时预览HTML文件,自动在浏览器中打开并支持热更新。
-
OffscreenCanvas是HTML5接口,可在WebWorker中进行Canvas渲染,通过transferControlToOffscreen将控制权移交Worker,实现主线程与绘图线程分离,提升性能。