前端技术文章
-
使用CSS媒体查询定义打印样式，隐藏非必要元素并调整布局；2.通过@page设置A4尺寸与页边距，避免内容截断；3.添加一键打印按钮调用window.print()；4.可选集成jsPDF或Puppeteer实现高质量输出。核心是确保内容在纸质环境中保持可读性与结构完整。281 收藏 -
侧边栏折叠时文字消失但图标保留的常见实现方式是用overflow:hidden、max-width:0和opacity:0组合控制文字可见性，配合transition实现平滑动画，并通过.sidebar-collapsed类和matchMedia精准切换状态，兼顾可访问性与响应式体验。412 收藏 -
![在HTML中，可以通过CSS的 transform-origin 属性来设置元素进行变形（如旋转、缩放等）时的基准锚点位置。这个属性决定了变换的起点，也就是元素围绕哪个点进行旋转或缩放。语法如下：transform-origin: [x] [y] [z];x：水平方向的锚点位置，可以是百分比、像素值、关键字（如 left、center、right）。y：垂直方向的锚点位置，同样可以是百分比、像素值](/uploads/20260516/17789380686a0870d40461d.png)
transform-origin是独立CSS属性，须与transform并列声明，作用于整个变换链；双值语法为X后Y，支持关键字/百分比/像素混用；非默认原点用像素值会增加GPU计算负担。108 收藏 -
需用JavaScript实现网页倒计时：一、Date计算时间差并setInterval每秒更新；二、data-*属性解耦目标时间；三、requestAnimationFrame提升精度；四、padStart补零格式化；五、通过时区标记（如Z或+08:00）或时间戳规避本地偏差。102 收藏 -
关键在于服务端响应头必须设置Content-Disposition:attachment，而非依赖download属性；因download仅对同源URL生效，跨域、file://协议或服务端未配响应头时均会失效。453 收藏 -
惰性函数是在首次调用时完成初始化并重写自身、后续调用直接执行优化逻辑的函数；它通过首次判断环境后替换函数引用，避免重复检测开销，适用于高频调用且判断逻辑较重的场景。203 收藏 -
直接用innerHTML插入用户输入会引发XSS和DOM错乱，因浏览器将<script>等字符解析为HTML；关键在于按上下文（文本节点、属性值、JS字符串等）精准转义或使用textContent/DOMPurify。167 收藏 -
Breadcrumb必须严格使用breadcrumb__element--modifier命名，块名是语义锚点；当前页应为breadcrumb__item--current作用于li，分隔符用li:not(:last-child)::before控制，中间项需保留DOM仅隐藏。379 收藏 -
localStorage不能直接替换Cookie，因二者语义不同：Cookie自动随请求发送、支持服务端控制字段和HttpOnly，localStorage纯客户端、无自动传输与过期机制、存取需手动序列化且不安全。380 收藏 -
isPrototypeOf()用于检测原型链关系，调用在潜在原型对象上并传入待检测对象，返回布尔值；它比instanceof更底层灵活，不依赖构造函数，仅检查实际原型链。265 收藏 -
counter-reset在子元素中不生效，根本原因是它只对后续同级或后代中满足作用域条件的counter-increment生效，且重置动作不继承、不传播、不穿透伪元素边界。333 收藏 -
track标签不添加字幕，仅声明外部轨道；显示依赖WebVTT合规性、路径可访问、浏览器加载成功及用户启用。440 收藏 -
必须用@forward+@use：ElementPlusSCSS变量系统基于SassModules重构，$colors等变量以嵌套map结构组织并带!default声明；@import已被官方弃用，会导致覆盖失效或编译错误，正确做法是先@forward原始var.scss并with覆盖值，再@useindex.scssas*，且需配置插件importStyle:'sass'确保走源码编译。317 收藏 -
metacharset和http-equiv的顺序会影响浏览器解析吗会，而且影响很实际：如果不在文档前1024字节内，某些旧版IE或移动端WebView可能按默认编码（如ISO-8859-1）解码后续HTML，导致中文乱码或脚本加载失败。实操建议：必须放在最开头，紧随标签之后，前面不能有注释、空格或任何其他标签等兼容性声明可以放它后面，但不要前置避免用http-equiv="Content-Type"替代charset——它已被废弃，且不被所有119 收藏 -
HTML中input的maxlength和minlength属性用于限制输入长度。其中，maxlength属性定义了用户可以在输入框中输入的最大字符数，而minlength属性则定义了最小字符数。1. maxlength 属性作用：限制用户最多可以输入的字符数。语法：示例：
示例：
maxlength仅截断键盘输入，对粘贴、拖拽、移动端组词等无效，需监听input事件手动截断；minlength=6与maxlength=6需配合required才强制6字符；number/date等type不支持maxlength，应改用min/max或JS校验；emoji混输时按UTF-16计数导致不准，推荐服务端最终校验。419 收藏