-
overflow与position结合使用时需注意裁剪和定位规则：1.overflow:hidden会裁剪absolute元素，影响下拉菜单显示；2.overflow:clip限制fixed元素范围，使其相对祖先而非视口定位；3.absolute容器可通过overflow-y:auto实现内部滚动；4.避免因层叠上下文错乱导致的渲染问题，合理调整DOM结构与样式优先级。
-
vertical-align用于控制inline或inline-block元素的垂直对齐，常见取值有baseline、top、middle等，适用于图片与文本对齐、表单布局等场景，需注意其仅对行内元素有效且受line-height影响。
-
::marker可直接替换列表项符号，仅作用于display:list-item的li元素，支持content、color、font系列属性，不支持margin等布局属性，需注意浏览器兼容性及list-style相关属性的互斥关系。
-
正确使用link标签需包含rel="stylesheet"、href指向CSS文件路径，建议放在head中确保样式优先加载，可结合media等属性优化适配不同场景。
-
浮动元素脱离文档流导致父容器背景色无法撑开，根本解决方法是触发BFC：现代推荐display:flow-root（Chrome64+/Firefox58+/Safari15.4+），旧项目兼容IE可用.clearfix伪元素清除浮动。
-
margin控制元素外间距，padding控制内边距；两者均可通过单、双、三、四值或单独方向设置，配合box-sizing:border-box可精准布局，避免默认间距影响，提升页面结构清晰度与可读性。
-
max-width:100%不生效的主因是父容器无宽度、内联宽高覆盖、flex/grid中min-width:auto阻碍缩放；必须配合height:auto保持比例，且需检查srcset/sizes和Safari渲染问题。
-
web-vitals是JavaScript库，非HTML标签或属性，需通过脚本调用onLCP/onCLS/onINP等函数采集指标；仅引入script不调用函数将无法获取数据，且须注意执行时机、buffered配置及手动上报逻辑。
-
本文详解如何在JavaScript中为可缩放/可拖拽图像设置精确的平移边界，确保无论缩放级别高低，图像始终不超出容器可视区域，重点修正原逻辑中因坐标系混淆导致的边界失效问题。
-
align-items:stretch会强制子元素在交叉轴上拉伸填满，导致正方形变形；应设flex-shrink:0、min-height替代height或改用align-items:flex-start等值来守住正方形。
-
仅用html{filter:grayscale(100%);}不够，需补-webkit-filter兼容旧版Safari/安卓WebView，并为IE11添加progid语法；应选html而非body作根选择器以确保全覆盖，且须规避性能拖慢、文本可读性下降及视觉细节崩坏问题。
-
Intl.NumberFormat('en-US',{style:'percent'})默认将输入值乘以100再加%符号；传入0.12得12%，若后端返回整数12则需先除以100，否则会显示1200%。
-
模板字符串用反引号包裹，支持多行、保留换行缩进、内嵌变量表达式（如${name}）、配合标签函数实现转义/格式化，调试可用JSON.stringify查看真实换行。
-
<inputtype="hidden">必须置于<form>内，设置合法name和动态/静态value，禁用敏感信息硬编码；CSS隐藏不可替代，因其语义错误且存在验证与可访问性风险。
-
HTML5播放器彻底绕过Flash依赖需从资源层、运行层双路径替换：SWF课件须转HTML5格式或重做；FLV/RTMP流需服务端转HLS/MP4并用hls.js播放；前端FlashAPI调用须重写为标准事件或postMessage通信。
