-
要避免IntersectionObserver立即触发，需设threshold:[0]并配合rootMargin（如'200px'）；懒加载图片须用data-src替代src，回调中赋值并清理；复用单个observer实例，加载后调用unobserve；不支持时降级为节流scroll+getBoundingClientRect。
-
clear:both无效是因为它只避开前一个浮动元素，不解决父容器塌陷；应使用::after伪元素触发BFC清除浮动，现代表单推荐flex布局。
-
圣杯布局必须用padding+float+relative三件套，因其需满足中间栏优先渲染且视觉居中、两侧栏固定宽度而中间自适应的核心约束；双飞翼则通过多一层main-inner嵌套用margin替代relative定位，但对HTML结构侵入更强。
-
">
CSScursor属性可自定义光标，需用url()指定图片路径并配fallback关键字（如pointer），路径相对于CSS文件位置，推荐≤32×32px的PNG格式，Safari等浏览器有兼容限制。
-
TailwindCSS任意值类不生效的主因是JIT未扫描到：方括号语法需严格无空格、非法字符，动态拼接字符串不被静态分析，且任意值类与内置类特异性相同易被覆盖；须验证编译后CSS是否含对应规则。
-
使用gap与repeat(auto-fill,minmax())实现响应式网格布局，通过grid-template-columns设置最小列宽并自动填充，gap确保项目间距均匀；为避免边缘不对齐，可采用justify-content:space-between配合max-content控制分布，或保留1fr实现等宽自适应；配合padding替代margin防止溢出，确保布局整齐无滚动条。
-
flex-wrap后justify-content:center不居中，因其仅对每行内子项生效，末行子项不足时靠左；真正整体居中应选grid布局或text-align+inline-flex方案。
-
不能。PyCharm无法直接调试index.html，因其为前端静态文件，无Python解释器参与；需通过HTTP服务（如http.server、Flask或JavaScriptDebug配置）在浏览器中运行并调试JS。
-
ref可安全获取DOM元素或子组件实例，需模板绑定同名ref属性、脚本中用ref(null)声明，并在onMounted后通过value访问；绑定子组件时须配合defineExpose暴露内容。
-
margin-inline和padding-block是逻辑属性，行为由direction和writing-mode决定；正确设置二者并配合dir属性即可自动适配RTL，无需手动切类或写两套规则。
-
JavaScript选取HTML元素应优先用document.getElementById()（最快，需id唯一）、querySelector()（灵活支持CSS选择器，只返首个）、querySelectorAll()（返全部匹配节点，返回静态NodeList）；慎用getElementsByTagName等动态集合方法。
-
应使用transform替代display控制侧边栏显隐：初始设transform:translateX(-100%)实现默认隐藏，点击触发.open类改为translateX(0)实现滑入动画；同时需用stopPropagation()阻止事件冒泡，避免点击菜单自身导致关闭，并采用flex布局让主内容区自适应避让。
-
items-center单独无法垂直居中，因为它仅在flex容器的交叉轴生效，需父容器设display:flex（或flex-col）、有明确高度（如min-h-screen），且主轴方向决定交叉轴方向；最稳妥方案是flex+items-center+justify-center同时作用于同一父容器。
-
1frminmax(0,1200px)1fr不适合实现固定留白，因两侧1fr动态均分剩余空间，导致留白不固定、小屏塌缩、浏览器兼容性差；可靠方案是margin:0auto+max-width或minmax(最小像素,1fr)配合明确下限。
-
functools.wraps是必选项，否则原函数的__name__、__doc__、__annotations__丢失，导致日志、监控、OpenAPI工具无法识别真实函数；埋点需用try-except兜底，禁用同步HTTP请求；带参装饰器须冻结参数避免闭包污染；Annotated仅作类型提示，无法替代运行时埋点逻辑。
