前端技术文章
-
本文针对初学者常见的两个CSS布局问题：border-radius在嵌套结构中不生效、以及column-count容器无法撑满预设高度，提供根本原因分析与可立即落地的修复方案。400 收藏 -
title属性仅在语义合理、交互明确的元素（如、<img>、<button>等）上有效，移动端不支持悬停触发，且不参与SEO；应优先用aria-label或aria-describedby提升可访问性。400 收藏 -
Object.assign()不适合大批量合并，应避免循环调用；推荐对象复用+显式赋值、分片处理、惰性计算及专用深度合并方案。400 收藏 -
断点续传核心是跳过已传切片，需前后端协同：用File.slice()按ceil(file.size/shardSize)分片，end设为file.size防丢末尾；以文件MD5为唯一fileId查服务端已传索引；localStorage存进度须防隐私模式、多标签冲突及容量超限。400 收藏 -
BEM通过命名结构实现样式沙箱隔离，.search__input因声明归属、角色与上下文依赖而具备天然隔离性，而泛化类名如.input无语义边界易致样式污染。400 收藏 -
直接上手做项目比死磕语法更有效，HTML精通在于语义化表达信息结构并为CSS/JS留接口；四类递进项目聚焦高频坑点：静态内容页、表单交互、响应式图文页、多页站点骨架。400 收藏 -
不能通过Object.defineProperty的value属性硬锁定对象方法引用；需同时设置writable:false、configurable:false和enumerable:false才能实现不可重写、不可删除、不可枚举的方法绑定。400 收藏 -
HTMLinput的pattern属性未生效的根本原因是浏览器仅在表单提交或调用checkValidity()时触发验证，且正则默认全字符串匹配、无需^$，不支持高级断言，须配合required和form使用。400 收藏 -
使用Next.js或Nuxt.js搭建SSR骨架，通过服务端渲染生成完整HTML，提升首屏速度与SEO；采用文件系统路由，确保前后端组件一致；利用getServerSideProps预取数据并注入props，实现状态同步；构建时分离客户端与服务端代码，部署于Node或Serverless环境，打通请求-渲染-输出-客户端接管全流程。400 收藏 -
margin:auto在flex中仅在有剩余空间的主轴或交叉轴方向生效；主轴填满时单侧margin无效，四边auto仅当两轴均有剩余空间才居中，IE11不支持单方向auto。400 收藏 -
letter-spacing用于调整字符间距，取值为normal、长度值或负值，可提升文本可读性与视觉效果，常用于标题、大写字母及移动端小字号优化，中文一般无需调整；需避免过度负值导致重叠，建议响应式设计使用em单位，注意空格标点也受影响，不同于仅控制单词间距的word-spacing。400 收藏 -
CSS定位通过position属性控制元素位置，包含static（默认流）、relative（相对偏移）、absolute（相对非static祖先）、fixed（相对视口）和sticky（条件吸附）五种方式，配合z-index管理层叠顺序。400 收藏 -
FormData不能直接转JSON，因含文件、重复键等；Object.fromEntries仅适用于纯文本无重复的极简场景，实际会丢失文件内容、覆盖同名值、兼容性差；应手动遍历并区分File与字符串类型处理。400 收藏 -
BEM通过强制单类名选择器将CSS权重恒定为0-1-0，天然规避!important滥用和嵌套爆炸；其核心是命名隔离而非权重优化，确保样式作用域清晰、协作边界明确。400 收藏 -
link顺序决定样式胜负，后加载的CSS会覆盖同权重的先加载样式，因此自定义CSS应置于框架CSS之后；若仍被覆盖，需检查并提升选择器权重，而非滥用!important。400 收藏