-
使用text-align:justify可实现HTML文本两端对齐,使段落左右边缘整齐,适用于正文、新闻等正式排版场景,但需注意短文本可能导致字间距过大,影响阅读体验。
-
浮动布局通过float实现文字环绕或简单多列,需注意清除浮动;2.定位布局利用position控制元素位置,适合弹窗、吸顶等特殊效果;3.弹性盒子(Flexbox)为一维布局,适用于导航、居中等组件级排布;4.网格布局(Grid)是二维系统,擅长复杂页面结构如仪表盘;5.传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
-
flex布局比百分比更可靠,因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响;推荐display:flex+flex-wrap:wrap,用gap替代margin,父容器设box-sizing:border-box。
-
内联关键CSS提升首屏速度,外部引用利于缓存复用,避免@import和行内样式滥用,通过压缩、去重、分块优化体积,结合异步加载实现高性能渲染。
-
先明确测试目标再选工具,核心是测函数速度、内存占用、并发能力或渲染性能;用performance.now()、DevTools、benchmark.js等工具精准测量;模拟真实场景如高频事件或并发请求;通过堆快照查内存泄漏;控制变量对比结果;将基准测试纳入CI,结合WebVitals持续监控优化。
-
柯里化是将多参数函数转为单参数函数链,每次只传一个参数并返回新函数;部分应用可一次传多个未填满参数。二者本质不同,柯里化强调严格单参数调用,部分应用更灵活。
-
用position:fixed居中模态框必须配合transform:translate(-50%,-50%),因top:50%和left:50%仅定位元素左上角到屏幕中心,translate才使其整体中心对齐;该方案兼容未知宽高,但祖先元素含transform等属性会导致fixed失效。
-
WebAssembly通过二进制格式和接近原生的执行速度提升JavaScript性能。1.代码体积小、解析快,适合高负载场景;2.支持C/C++、Rust等语言编译,增强计算能力;3.与JavaScript互操作,关键路径用Wasm,其余用JS处理。适用于图像视频编辑、游戏引擎、数据处理等场景,结合WebWorkers可避免卡顿。合理使用能显著优化Web应用性能。
-
font-variation-settings动画不平滑的关键在于插值方式:浏览器默认将其视为离散字符串,需显式声明animation-timing-function、确保轴值为统一格式数字、用@property注册可插值CSS变量,并避免font-weight干扰及字体加载导致的FOIT/FOUT。
-
grid-auto-flow:dense不能主动填空,仅让未显式定位的网格项在自动放置时尝试填补空缺;它不改变DOM顺序、不响应式重排、不影响已定位项,且可能损害可访问性与性能。
-
max-width和max-height可防止内容溢出与变形,提升响应式设计的适应性;2.图片设置max-width:100%配合height:auto保持比例,避免失真;3.文本容器通过max-width限制最佳阅读宽度,结合margin居中实现弹性布局;4.弹窗或下拉菜单使用max-height限制高度,配合overflow-y:auto防止垂直溢出;5.设置box-sizing:border-box确保padding和border不超出最大尺寸,使盒模型计算更直观。合理运用这些属性能增强页面的可读性
-
前端数据流模式需根据项目规模、团队习惯和技术栈选择;2.Flux提出单向数据流,流程清晰但样板代码多;3.Redux采用单一Store和不可变更新,适合大型团队协作;4.MobX基于响应式,开发高效但追踪变化较难;5.Zustand轻量简洁,适合现代React项目快速上手;6.Vue响应式系统内置集成,Pinia提升模块化与TypeScript支持。
-
Promise是对“未来值”的可组合抽象,本质为不可逆的状态机(pending→fulfilled/rejected),执行器同步运行,then/catch回调在微任务队列执行,需注意链式返回、错误捕获范围及状态继承特性。
-
:nth-child(n+k)按所有子节点(含文本、注释)计数,非仅目标标签;应优先用:nth-of-type()选同标签序号,或用data-index/JS打标规避DOM结构依赖。
-
rgb()不支持透明度,必须用rgba();rgba()第四个参数为0–1的alpha值,如rgba(255,0,0,0.5);替代方案有hsla()和#rrggbbaa(现代浏览器);勿与opacity混用。