-
position:sticky在Safari15.4前、Chrome56前不生效，需设最近滚动祖先高度或overflow；iOSSafari中对table子元素无效；父容器含transform/perspective/filter会禁用sticky；z-index在IE/旧Edge中因层叠上下文判断差异导致遮挡异常；iOSSafari中fixed元素存在跳变、缩放失真等问题；absolute在Flex/Grid容器中旧版浏览器包含块判定不一，建议显式设position:relative。
-
百分比宽度以包含块宽度为基准，padding/margin百分比也按父宽计算以防循环，height百分比需包含块高度确定，box-sizing影响实际占位。
-
函数式编程强调纯函数与不可变性，利用高阶函数如map、filter、reduce实现数据处理管道，在JavaScript中提升代码可读性与可维护性。
-
Canvas是需手动控制每帧绘制的底层位图画布，依赖JavaScript上下文接口；须显式设置width/height属性、用requestAnimationFrame实现动画、监听图片load事件并处理跨域，否则易出现失真、空白或错乱。
-
flex-shrink未生效的根本原因是min-width:auto阻止收缩，必须显式设置min-width:0，并配合word-break或overflow-wrap强制折行及overflow:hidden裁剪。
-
使用text-align:justify可实现HTML文本两端对齐，使段落左右边缘整齐，适用于正文、新闻等正式排版场景，但需注意短文本可能导致字间距过大，影响阅读体验。
-
浮动布局通过float实现文字环绕或简单多列，需注意清除浮动；2.定位布局利用position控制元素位置，适合弹窗、吸顶等特殊效果；3.弹性盒子（Flexbox）为一维布局，适用于导航、居中等组件级排布；4.网格布局（Grid）是二维系统，擅长复杂页面结构如仪表盘；5.传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
-
flex布局比百分比更可靠，因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响；推荐display:flex+flex-wrap:wrap，用gap替代margin，父容器设box-sizing:border-box。
-
在SVG中为不同<text>元素添加不同背景色时，若复用相同id的<filter>，会导致所有文本均应用首个定义的滤镜颜色；解决方法是为每个滤镜分配唯一id，并确保filter属性正确引用对应ID。
-
:only-of-type只判断同级中同标签是否唯一，无视class等属性；真正需要“唯一某类元素”时应改用:is(.item):not(.item~.item)或JavaScript检测。
-
favicon.ico放根目录虽可被部分浏览器自动加载，但iOS/Android需显式link声明，HTTPS下HTTP图标会被拦截，缓存顽固须硬刷新或改名，PWA必须配manifest.json。
-
图片在flex容器中被拉伸变形的根本原因是默认flex-shrink:1与align-items:stretch共同作用，解决关键是img{flex-shrink:0;width:100%;height:auto;}，并依flex-direction调整尺寸声明。
-
箭头函数的this继承外层普通函数作用域的this值，不绑定执行上下文；不能用call/apply/bind修改，不可作为构造函数，无arguments对象。
-
需先通过DOM获取media元素实例（如querySelector或getElementById），确保脚本在DOM加载后执行；跨域资源需加crossorigin="anonymous"；play()必须由用户手势触发并处理Promise拒绝；常用属性包括currentTime、volume（iOS受限）、muted、paused、ended、playbackRate；应监听canplay、canplaythrough、timeupdate、ended等事件而非轮询。
-
实现元素旋转动画需结合transform、@keyframes和animation。首先用transform:rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation:spin2slinearinfinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为centercenter。
