-
min-content是内容不换行时的最小宽度,如英文最长单词或整段URL撑开的宽度;max-content是内容完全不换行所需最小宽,无视父容器限制,易致溢出。
-
HTML仅是容器,真正实现消息推送需JavaScript的NotificationAPI(仅前端通知显示)和WebPush(需ServiceWorker+PushManager+后端支持)。
-
必填字段的红星不必强制用::after实现,但它是语义清晰、可访问性佳的最优解;应加在label上且仅对required字段生效,因input不支持伪元素;需用color和margin-left控制样式,确保无障碍兼容。
-
本文详解如何绕过TypeScript装饰器的编译时限制,通过手动调用__decorate函数,将自定义装饰器(如属性装饰器)动态应用到无法修改的第三方类(如classA)的指定属性上。
-
父元素高度塌陷是因浮动元素脱离文档流,解决方法是触发BFC(如overflow:hidden)或清除浮动(如::after+clear:both),现代布局推荐直接使用flex/grid。
-
scroll-behavior:smooth必须写在html元素上,因CSS规范限定其仅对根滚动容器生效;body滚动实为html滚动,加在body或其他元素无效,且不可被后代选择器或!important覆盖。
-
锚点跳转失效主因是id与href匹配细节或DOM状态异常:id须全局唯一且不以数字开头;href需为合法hash格式;目标元素须已渲染且可见;可用scrollIntoView()替代或监听hashchange手动滚动,并用scroll-margin-top解决吸顶遮挡。
-
改网页标题只有两种可靠方式:静态写在<head>里的<title>,或运行时用document.title赋值;其他操作均不保证生效,尤其影响SEO和历史记录。
-
box-shadow不仅是加阴影,其默认不占布局空间,但易因blur-radius过大被裁剪、inset误用、多层阴影绘制顺序(从左到右、由远及近)及性能问题被忽视;语法须严格按h-offsetv-offsetblur-radiusspread-radiuscolorinset顺序书写,前两项必填,blur-radius模糊边缘,spread-radius扩大阴影尺寸;多层阴影用逗号分隔,每层参数须完整;inset需配合padding和border使用;响应式下应通过媒体查询、rem或伪元素适配,深色模式
-
结论:inputtype="file"配合accept="image/*"与capture="user"/"environment"是最轻量兼容的纯HTML调起摄像头方式;capture="camera"非标准且已失效,iOS会禁用相册、Android行为不一,需UA检测动态设置;漏写accept则capture无效;上传后需处理EXIF方向。
-
@import在模块化项目中无法按需加载,因其是同步阻塞的原生CSS规则,不参与JS模块依赖图,Webpack/Vite默认不支持其条件加载或拆分,导致全量打包;推荐改用JS层动态importCSS、CSSModules配合提取插件或CSS-in-JS方案。
-
推荐在formsubmit事件中用event.target.elements或FormData获取表单值,避免手动遍历;注意name属性、disabled状态、checkbox/radio的checked判断及enctype设置。
-
现代浏览器(Chrome76+、Edge79+、Firefox75+、Safari15.4+)已原生支持loading="lazy",但iOSSafari15.4前及微信旧版WebView不识别;仅对<img>和<iframe>生效,须配合src/srcset使用,且需确保图片有明确宽高以防误加载。
-
::before和::after伪元素需配合content属性使用,可在不修改HTML情况下插入内容或装饰,常通过定位实现视觉效果,并应关注性能与可访问性。
-
用<img>的width/height属性仅缩放不裁剪;真正裁剪需容器设宽高+overflow:hidden+object-fit:cover或绝对定位;精确控制用clip-path或Canvas;服务端裁剪更优但需校正EXIF方向。