前端技术文章
-
网页出现环绕整个页面的白色空白，通常是因<body>元素默认存在margin和用户自定义的padding（如padding:100px）导致；Bootstrap并不会自动重置这些值，需显式清除。471 收藏 -
真正可用的星空效果必须用canvas+JavaScript实现，CSS方案因DOM过多、无深度感、无交互、性能差而不可取；canvas可通过requestAnimationFrame控制帧率、鼠标跟随、视差滚动及生命周期管理实现高性能动态星空。471 收藏 -
TemporalAPI通过不可变设计、精确类型划分和显式时区控制，解决了Date对象的时区混乱与可变性问题。1.所有操作返回新对象，避免副作用；2.提供PlainDate、ZonedDateTime等专用类型，语义更清晰；3.使用IANA时区名称进行可靠转换；4.方法命名直观，支持链式调用，提升代码可读性与维护性。471 收藏 -
HTML5中border需用CSS设置，最简写法为div{border:1pxsolid#000;}；平板边框异常多因overflow裁剪、box-sizing未预留空间或高DPI下1px发虚，非HTML5或设备专属问题。471 收藏 -
应使用<mark>标记当前上下文中具有相关性或需视觉突出的文本，如搜索关键词、引用条款；它专为“高亮”设计，语义区别于强调重要性的<strong>和无语义的<span>。471 收藏 -
需遵循五步结构化流程：一、切图与资源导出；二、建立HTML5语义化结构；三、编写移动优先CSS样式；四、嵌入响应式图像与媒体查询；五、验证语法并添加原生JavaScript交互。471 收藏 -
结论：HTML规范必须通过自动化工具落地执行。Prettier统一格式、Stylelint约束类名、模板预置注释、空行划分逻辑、注释标准化并强制英文，配合husky预提交校验，才能真正提升协作效率。471 收藏 -
BEM是通过命名规则将样式意图编码进类名的协作方案，而非美化CSS的技巧；其双下划线和双破折号语法支持工具链识别、避免命名冲突、保障重构安全，并需配合函数化生成与渐进式落地。471 收藏 -
本文详解ROT13（凯撒密码移位13位）的JavaScript实现，指出原始代码中splice()误用、映射不全、非字母字符未处理等关键问题，并提供可扩展、易维护的优化方案。471 收藏 -
link的media属性需写成“screenand(max-width:768px)”才生效，缺少screenand前缀会导致旧版Safari等浏览器忽略；它在HTML解析阶段决定是否发起CSS请求，而非加载后隐藏，性能优于CSS中@media规则。471 收藏 -
margin-left:auto靠右生效的前提是元素处于干净的flex上下文：父容器需为display:flex且未被justify-content等覆盖，目标元素须为直系子项、无DOM干扰节点，并在flex-direction:row下使用。471 收藏 -
Tailwind默认不支持width过渡动画，需用transition-[width]配合内联style="width:X%"实现平滑动画，类名切换（如w-1/2）无法插值。471 收藏 -
<address>标签默认斜体是浏览器UA样式决定的，非HTML规范强制；其语义仅限文档/文章作者联系信息，不可滥用；取消斜体用font-style:normal，需兼顾可访问性与语义正确性。471 收藏 -
XMLHttpRequest读取XML时getAttribute()返回null的根本原因是浏览器误将XML当HTML解析，需设responseType='document'、服务端返回正确Content-Type，并用getAttribute()（非elem.id）读属性。471 收藏 -
首屏预读机制是在首屏渲染完成、用户可交互后，利用主线程空闲时机按需加载非首屏必需但复用率高的数据，通过requestIdleCallback节制执行、状态标记防重复，并在DOM就绪后延迟启动。471 收藏