-
Flexbox适用于一维布局（如按钮组、导航栏），二维布局应选Grid；避免深层嵌套、混用margin与gap、忽略父容器宽度；主轴由flex-direction决定，justify-content控制主轴，align-items控制交叉轴。
-
用rem+viewport缩放控制最稳妥，但必须禁用text-size-adjust，否则iOSSafari会强行放大小字号文本；根本原因是系统「可读性缩放」和浏览器对viewport解析差异，导致手机和平板文字表现不一致。
-
transition不能单独设置移出动画，它只响应属性变化；正确做法是将transition声明写在:hover中实现慢入快出，基础状态不写以确保移出时瞬间回弹。
-
不能。background-color动画仅支持纯色间过渡，无法生成线性渐变效果；真正动态渐变需用background-image+background-position动画实现。
-
type="number"无法实时阻止非法输入，仅提供数字键盘和基础解析；真正限制需用input事件+正则过滤并维护光标位置，且服务端必须二次校验。
-
HTML可访问性焦点管理的核心在于理解并运用HTML默认行为、tabindex属性及JavaScript的focus()方法。1.使用tabindex="0"将非交互元素加入Tab序列；2.用tabindex="-1"实现程序化聚焦；3.避免使用正数值tabindex；4.通过focus()实现动态焦点控制；5.为:focus状态提供视觉指示。焦点管理解决了键盘与辅助技术用户的导航问题，降低认知负荷，满足合规要求。常见陷阱包括滥用正tabindex、混淆视觉与辅助隐藏、动态内容处理不当。调试应通过纯键盘测
-
JavaScript是网页的“行动力”来源，负责交互响应、动态更新内容、控制页面元素、与服务器交换数据、构建前端应用，并借助Node.js等拓展至服务端与桌面端。
-
用transform和opacity不卡是因为它们仅走合成层，不触发重排重绘；而left、top等会触发layout→paint→composite全流程，导致掉帧。
-
alpha通道是控制颜色透明度的参数，0为完全透明，1为不透明；在rgba()或hsla()中第四个值即alpha，影响元素与背景的颜色混合效果，常用于实现半透明遮罩、背景融合等视觉设计。
-
opacity作用于整个元素及其内容，取值0到1；rgba或hsla可实现背景或边框透明而文字不透明；层叠时半透明元素会混合颜色；需整体透明用opacity，仅背景透明用rgba，结合使用可提升视觉层次。
-
需绕过Jimdo默认画廊，用HTML5语义标签构建结构，CSSGrid实现响应式缩略图布局，<details><summary>添加无JS展开交互，<picture>适配多分辨率，CSS悬停与焦点优化满足可访问性。
-
line-height用无单位数值（如1.4）可随字体缩放自适应，用像素值（如20px）则固定不变导致错位；它只影响行内内容间距，不控制容器高度，垂直居中需配合flex或height使用。
-
background-origin默认值是padding-box；它与box-sizing无关，显式设为border-box时背景原点在边框外边缘左上角，需配合background-clip:border-box才能显示在边框区域。
-
使用position:relative与absolute结合实现徽章定位，通过transform精确对齐元素右上角；2.利用border-radius设置圆形或胶囊形状提升视觉效果；3.应用于头像、图标等场景提示未读数或状态，配合z-index避免遮挡，支持文本与小红点样式，构建简洁高效视觉提示。
-
PerformanceAPI通过getEntriesByType和PerformanceObserver可可靠获取FCP、LCP、CLS等WebVitals指标；用户行为埋点应聚焦可见性、路由、核心交互等可归因事件；上报优先用sendBeacon批量异步发送，避免阻塞。
