-
推荐用@mixintypography($size,$weight,$lh)封装字体样式,以rem为单位、无单位行高、语义化字重变量,兼顾响应式、可维护性与无障碍;CSS变量适合动态主题,Sassmixin更适合设计系统约束与兼容性保障。
-
:focus状态下outline不消失是因浏览器UA样式优先级高或:focus-visible策略干扰;应避免直接outline:none损害可访问性,改用outline:2pxsolidtransparent或自定义样式,并补充-webkit-appearance:none等兼容写法。
-
步骤条跳转逻辑由父组件状态和业务规则控制,Emit仅传递点击意图;父组件校验后更新currentStep并加载数据,推荐用v-model封装以保持子组件纯粹。
-
box-shadow的模糊半径(blur-radius)控制边缘柔和度,不改变阴影尺寸;真正实现“扩散”需依赖扩展半径(spread-radius),二者配合使用才能获得自然的光影效果。
-
<metahttp-equiv="refresh">通过content属性实现页面定时刷新,格式为“秒数;url=地址”,秒数为正整数,url省略时默认刷新当前页,不依赖JS,但会丢失状态且不推荐用于生产环境。
-
transparent是CSS中表示完全透明的颜色关键字,用于隐藏元素背景颜色而不影响布局。通过设置background-color:transparent,可使元素背景透明化,显示其父容器或页面底层内容,适用于按钮悬停、模态框遮罩和响应式设计等场景。相比rgba(0,0,0,0),transparent语法更简洁、语义更明确,是实现背景透明的基础实用方法。
-
WebGL渲染必须使用<canvas>元素,因其独有getContext('webgl')方法;其他HTML元素如<div>或<img>不支持该方法,调用会报错。
-
<inputtype="file">需用label关联或JS调用click()激活,禁用display:none或opacity:0;accept仅提示类型,校验须JS+后端;预览用FileReader读取DataURL,大文件避readAsDataURL;FormData上传注意IE11兼容性。
-
JavaScript单页应用(SPA)仅用一个HTML页面,通过JavaScript动态更新内容,实现局部刷新;传统网页每次跳转都请求新HTML并整页重载。
-
localStorage完全不产生请求头带宽消耗,而cookie会随每个同源HTTP请求自动附加到Cookie请求头中,造成冗余传输;前者需JS显式读取并手动发送,后者则无论是否需要均强制携带。
-
混用%和fr时,百分比列先按容器宽度计算,fr列再平分剩余空间;顺序影响布局,如50%1fr1fr中后两列各得剩余空间的1/2,而非容器的25%。
-
使用align-items:baseline可实现文字与图标基线对齐,使视觉更协调。该属性让Flex子元素按文本基线对齐,适用于含行内内容的元素;若子元素无文本,浏览器会回退到容器首行基线,可能导致意外效果。实际应用中,如按钮或菜单项包含不同大小的图标和文字时,设置align-items:baseline能避免center对齐导致的图标“下沉”问题。需注意:子元素应为行内或inline-flex盒模型,避免块级元素干扰;纯图标元素基线位于底部,可能影响对齐精度;不同字体基线差异建议统一字体族;Safari
-
最可靠全屏覆盖用position:fixed+object-fit:cover或background-image+background-size:cover;前者需display:block消除间隙,后者更稳定且免DOM冗余。
-
URLSearchParams是浏览器原生处理URL查询参数的接口,支持多种初始化方式、自动编解码、增删改查及多值操作。
-
hsla()必须写为hsla(色相,饱和度,明度,alpha),前三个参数带%或无单位数字,alpha为0–1小数;斜杠语法仅新浏览器支持,旧版需逗号分隔;不继承,与rgba()混合逻辑一致但调色更直观。