-
word-wrap/overflow-wrap失效主因是父容器未设width或flex子项缺min-width:0；break-word不断词优先，anywhere可断中文但影响阅读；IE需双写，且white-space:nowrap会覆盖换行。
-
使用::before伪元素结合content属性可高效添加图标标记，常用于按钮、链接等场景。通过content插入Unicode字符或字体图标（如FontAwesome），配合margin、vertical-align等属性优化布局与样式，实现无需额外HTML标签的轻量级装饰效果。注意仅用于非关键性视觉内容，确保可访问性与兼容性。
-
最简可用加载动画需满足：名字唯一，且含from和to（或0%/100%）；绑定到真实元素并确保其可见、有尺寸；用transform:rotate()而非left/top；JS控制启停以对齐请求节奏。
-
@supports是CSS条件规则，用于声明式控制样式是否生效，不触发网络请求；需全写属性+值，支持and/or/not组合，兼容现代浏览器但IE完全不支持，不能实现按需加载CSS文件，该由JavaScript配合CSS.supports()实现。
-
HTML5本身不支持原生可编辑流程图，需依赖第三方JS库：Mermaid适合只读渲染，diagrams.netiframe方案开箱即用可编辑，GoJS/JointJS适用于深度定制场景。
-
字体大小影响换行，但非唯一因素。font-size增大会增加字符宽度，可能导致换行，但实际换行还受容器width、white-space、word-wrap、word-break及文本内容影响。例如white-space:nowrap会禁止换行，即使字体很大；而word-wrap:break-word可让长URL在容器内断行。使用br标签或word-break:break-all可强制换行。响应式设计中，可通过媒体查询调整font-size和换行属性适配不同屏幕，确保布局美观。
-
链式调用需手动实现因JS原生方法默认不返回this；核心是每个方法末尾returnthis，终止方法如get()返回结果；易错点包括异步断裂、this丢失、混用返回类型及调试困难。
-
主栏设flex:100（可增长、不收缩、无基准宽），副栏设flex:00280px（不增长、不收缩、固定基准宽），容器需display:flex且明确flex-direction；默认flex-shrink:1会导致主栏被压缩，故必须显式禁用。
-
favicon.ico必须放在网站根目录（如http://localhost:8000/favicon.ico）才能被浏览器自动识别；若放子目录或使用file://协议访问，则需在<head>中显式添加<linkrel="icon"href="/favicon.ico">并确保路径为绝对路径。
-
display:none无法触发transition，应改用opacity、transform等可过渡属性组合；推荐opacity+transform实现平滑隐藏/显示，并配合pointer-events:none避免交互穿透。
-
TV浏览器video标签不显示<track>字幕的主因是底层引擎未启用字幕渲染管线；需手动JS解析VTT并DOM渲染，注意性能优化、MIME类型、同源策略及平台私有API限制。
-
直接读取select元素的value属性可获取当前选中项的值，多选时需用selectedOptions；change事件监听值变化，设置选中推荐赋值value。
-
根本原因是服务端未在Content-Type响应头中声明charset=utf-8，导致浏览器按ISO-8859-1解析UTF-8编码的中文；Node.js需显式设置text/event-stream;charset=utf-8，PHP须避免BOM和输出缓冲干扰，Nginx需强制补全charset。
-
结论：Sass嵌套响应式导航应避免顶层无节制嵌套媒体查询，正确做法是抽离断点为@mixin或变量、组件级写媒体查询、语义化分层命名、分离移动端状态、分层管理变量、禁用@extend改用@mixin、写标准属性交由Autoprefixer处理。
-
百分比单位参考对象各不相同：width等基于父宽，height需父有明确高度，padding/margin也基于父宽，font-size基于父字体大小，transform基于自身尺寸，background相关属性基于背景定位区。
