-
display:flow-root是解决浮动导致父容器高度塌陷最干净、语义化的方案，它通过创建BFC使父容器包含浮动子元素尺寸，不裁剪内容、无副作用，现代浏览器支持良好。
-
unicode-range在IE11、Android4.4WebView及iOS9.3前Safari中不支持或解析异常，导致字体回退失效；需用JavaScript检测lang属性加载子集、@supports降级、独立font-family兜底并清洗字体name表。
-
transform-style:preserve-3d没效果最常见的原因是父容器未设置该属性，导致子元素3D变换被拍平；必须在直接包含3D子元素的父容器上显式设置，且需配合perspective、避免overflow:hidden等裁剪行为。
-
不能直接撑开，伪元素需设pointer-events:none并用absolute定位扩展热区，同时确保父容器relative、真实元素保留默认事件捕获，配合touch-action:manipulation减少延迟。
-
使用fr单位、minmax()函数和auto-fit可实现CSSGrid响应式缩放：1.fr按比例分配剩余空间，容器变化时列宽等比伸缩；2.minmax(200px,1fr)确保最小宽度同时允许弹性扩展；3.repeat(auto-fit,minmax(200px,1fr))使列数自适应屏幕，自动填满并拉伸轨道；4.混合80px、1fr、minmax(200px,2fr)等单位可构建复杂布局。关键在于minmax上限设为1fr以保持弹性，避免固定值导致失去响应性。
-
FileReader读取中文乱码需显式指定编码，如readAsText(file,'GBK')；若编码未知，先用readAsArrayBuffer()配合TextDecoder尝试解码。
-
零基础HTML配色应依赖工具或算法而非手动选色，推荐用Coolors等在线工具导出CSS变量，再通过var()调用；动态场景优先使用chroma.js处理色彩计算与对比度校验。
-
fetch调用免费汇率API总返回CORS错误，是因为服务端未配置Access-Control-Allow-Origin，需通过后端代理或改用支持CORS的CDN源（如currency-api）解决。
-
根本原因是默认box-sizing:content-box下width:100%仅指内容区宽度，padding和border会额外叠加导致溢出；解决方案是使用box-sizing:border-box，推荐全局设置,::before,*::after{box-sizing:border-box;}。
-
小屏幕下网页内容被裁切时，应通过设置overflow-x:auto启用横向滚动，并结合Flexbox或CSSGrid实现自适应布局。1.使用overflow-x:auto允许容器水平滚动，配合min-width防止内容压缩；2.采用display:flex与flex-wrap:wrap使子元素弹性伸缩并自动换行；3.利用grid-template-columns:repeat(auto-fit,minmax(200px,1fr))创建响应式网格；4.避免固定宽度，优先使用fr、%等相对单位；5.在关键容器
-
fill-current仅对内联SVG且无硬编码fill/stroke时生效；失效主因包括img引入、内联fill覆盖、父级无color设置、低版本Tailwind或PurgeCSS误删。
-
长文本溢出容器不换行的根源是white-space被设为nowrap或pre；中文长串需用overflow-wrap:break-word或word-break:break-all；Flex/Grid子项须加min-width:0才能正常折行。
-
ES6起函数默认参数语法为param=defaultValue，仅当传入undefined时生效；null、0等falsy值不触发；支持前参引用后参但不可逆；表达式每次调用求值。
-
HTML表格通过table、tr、td/th构建，支持border样式、colspan/rowspan合并单元格、caption标题及thead/tbody/tfoot语义结构。
-
加rel="noopener"是底线：它切断window.opener引用防跳转劫持，且保留Referer；rel="noreferrer"则同时禁用二者，适合隐私敏感场景。
