-
箭头函数的this指向固定且不可修改，它捕获定义时外层普通函数的this值；不能用作构造函数、无prototype、无arguments、不支持yield，特定场景下完全不可用。
-
用position:absolute布局图片画廊易错位，主因是父容器padding/border未清空或未设relative；应设padding:0、border:none、box-sizing:border-box，并用transform:translate(-50%,-50%)居中，配合box-shadow替代border实现灵活边框。
-
没有“最好”的CSS工具，只有最匹配项目的：原子化框架适合MVP快速迭代，CSS-in-JS适配设计系统，原生CSS+PostCSS适合静态站点，大型中后台应重架构分层而非框架选型。
-
border-radius生效需配合background-color或border；img加圆角须自身设置并设display:block；box-shadow不随圆角变形，需overflow:hidden或filter:drop-shadow()；移动端小圆角发虚宜用偶数像素或50%。
-
应使用requestAnimationFrame替代setTimeout实现平滑动画，配合预加载图片（newImage()+onload）、避免复用实例、用opacity/visibility控制切换，并通过picture或服务端适配WebP等格式。
-
严格模式禁用with语句、给只读属性赋值、函数参数重名、arguments映射形参及callee/caller；要求"usestrict"置于顶层或函数首行；使this为undefined、未声明变量赋值报错；ES6模块默认启用。
-
创建元素节点必须用document.createElement()而非innerHTML，避免清空子节点、重排和丢失事件；textContent用于纯文本防XSS，innerHTML会解析HTML；插入用append/prepend/before/after，删除前须检查parentNode，替换用replaceWith更灵活。
-
flex布局中用margin-left:auto推最后一个元素靠右的原理是利用flex剩余空间分配机制：该元素“吃掉”左侧所有可用外边距，从而右移；需父容器display:flex且子元素为直系子项，不可混用justify-content:flex-end或设置flex-grow:1。
-
多数CSS框架不直接暴露原生display:grid完整能力，需主动用原生Grid覆盖补足；其工具类仅简化列数控制，不支持命名区域、函数式轨道、跨行跨列等复杂布局需求。
-
最简单方案是使用title属性，但存在移动端不触发、无法换行和自定义样式等缺陷；无障碍需结合alt、aria-label或aria-labelledby；高级交互应采用CSS伪元素或轻量JS实现，并注意焦点管理和XSS防护。
-
打印时padding被截断是因为物理纸张无滚动机制，内容超出可打印区域即被裁切；应使用@page设置margin控制边界，而非依赖padding，并通过导出PDF验证真实效果。
-
利用CSS的:focus与::after伪元素可实现输入框聚焦时的提示效果；2.推荐使用父容器结合:focus-within与::after显示提示内容；3.也可通过相邻兄弟选择器使聚焦后兄弟元素显示提示；4.注意定位、层级及移动端适配，复杂场景仍需JavaScript。
-
fixed页头错位因width:100%按视口计算且受滚动条影响，应改用left:0;right:0;拉伸；内容区需margin-top或bodypadding-top避让；对齐居中内容时用width:100%;max-width:1200px;margin:0auto。
-
Flexbox实现等高布局时需为容器设min-height/height以兼容IE10–IE11，-ms-flex:1替代flex:1；CSSTable兼容IE8+但不支持margin和vertical-alignmiddle/bottom；Grid在IE中不可用；JS补位仅限必要场景。
-
animation-fill-mode用于控制动画外元素样式应用，解决跳回问题。默认none不保留样式；forwards使动画结束后保持最后一帧；backwards在动画开始前及延迟期间应用第一帧；both结合二者效果。例如淡入动画配合forwards可防止透明度复原，滑入动画使用backwards避免延迟期间的闪烁，复杂入场动画用both实现平滑呈现。合理选择值能提升动画流畅性。
