前端技术文章
-
文档流是HTML元素默认的布局方式，块级元素垂直排列、行内元素水平排列；脱离文档流需主动干预，如float、absolute、fixed，会导致父容器塌陷、内容重叠等问题。123 收藏 -
原生CSS写得慢是因缺乏变量、嵌套、混合和条件复用能力，导致重复书写与全局搜索；Sass提供成熟变量、嵌套和mixin机制，PostCSS通过插件支持现代语法，配合sourcemap实现精准调试。177 收藏 -
Antd的@ant-design/cssinjs在SSR中通过服务端创建唯一cache、收集样式字符串并注入HTML的<style>标签，客户端复用同一cache完成水合；版本不一致或cache复用错误会导致样式丢失或闪屏。271 收藏 -
闭包实现的局部单例池无法跨标签页协同管理网络资源，因各标签页拥有独立JS执行环境，闭包变量完全隔离；可行方案包括BroadcastChannel、SharedWorker、localStorage+storage事件等。235 收藏 -
<header>必须作为页面或内容区块的真正头部，承担引导、导航或介绍功能；嵌套过深、包裹过宽或脱离逻辑层级会破坏语义，且与<head>无关。454 收藏 -
br标签仅用于纯换行，不创建段落、无语义、无默认间距；正确场景限于地址块、诗歌歌词、表单label说明；滥用会导致响应式错位、可访问性问题及RTL异常；清理应优先禁用CSS检查结构，再用脚本删除孤立br。297 收藏 -
现代移动端浏览器已系统级忽略user-scalable=no，仅靠viewport标签无法真正禁止缩放；需结合gesturestart/touchstart事件拦截并设passive:false。305 收藏 -
translate属性是向浏览器翻译引擎发出的明确禁译指令，仅影响自动翻译行为；必须加在代码标识符、API路径、版本号、CSS类名等技术字符串上，且需注意继承例外与动态内容手动补全。278 收藏 -
纯前端即可实现实时BMI计算：监听input事件，用parseFloat清洗输入，按中国标准分类并toFixed(1)显示，校验非正数防止NaN，textContent更新结果。428 收藏 -
心跳间隔应设为路径中所有中间设备最小空闲超时值的0.6～0.7倍，例如最小超时45秒，则心跳设25～30秒；需服务端主动发PING、客户端立即回PONG，且重连成功后首帧即心跳。174 收藏 -
表单提交后页面跳转但后端收不到数据，主因是未配置正确的action和method属性、后端未监听对应路径或缺少请求体解析中间件；需确保action指向有效后端地址、method匹配接收方式，并在Express等框架中启用express.urlencoded()和express.json()中间件。462 收藏 -
答案：JavaScript通过HistoryAPI实现无刷新路由控制，利用pushState和replaceState操作历史记录，结合popstate事件监听前进后退，可构建简易前端路由系统；实际开发中多使用ReactRouter等基于该API的框架库来管理复杂路由与状态。496 收藏 -
structuredClone()无法拷贝ImageData实例，因其被HTML规范列为“不可克隆的平台对象”，直接调用会抛出DataCloneError；推荐手动重建：用structuredClone(imageData.data)克隆像素数组，再结合width、height创建新ImageData。127 收藏 -
准确检测Retina屏的核心是window.devicePixelRatio≥2，它是唯一稳定、无需polyfill的原生信号；其他方法如媒体查询、UA解析或宽高比计算均因兼容性或响应性问题不可靠。449 收藏 -
实现弹性按钮布局的关键在于结合CSS框架的工具类与Flexbox，Bootstrap通过d-flex、flex-row等类快速构建响应式布局，Tailwind则用flex、gap-2等原子类提供更灵活控制，二者均支持响应式断点与换行，确保按钮在不同屏幕下自适应排列。457 收藏