-
字体图标布局错乱主因是inline默认对齐基线，修复需设display:inline-block、统一line-height（如24px）、vertical-align:middle，并处理空格间隙（font-size:0+子元素重设字号）或改用Flex；图标类须固定font-size并微调vertical-align（如-0.125em）。
-
实现HTML元素上下浮动需用CSS定位技术：一、absolute定位配合top/bottom；二、flexbox设column方向加margin-auto；三、grid划分rows区域；四、table-cell配vertical-align；五、transformtranslateY位移。
-
网页展示数据需结合HTML、CSS与JavaScript，首选table展示结构化数据，配合Chart.js等库实现可视化图表，通过fetch加载远程JSON动态渲染内容，并利用响应式设计与交互优化提升用户体验。
-
Promise是处理异步操作的核心对象，具有pending、fulfilled和rejected三种状态，通过newPromise()创建并使用resolve和reject控制结果，利用.then()、.catch()和.finally()处理后续逻辑，支持链式调用以避免回调地狱，并可结合async/await使异步代码更简洁易读。
-
可通过iframe、JavaScript动态加载、ES模块导入或object标签四种方式嵌入HTML文件：iframe适用于静态嵌入；fetch适合动态控制与错误处理；import需服务端支持MIME类型；object提供fallback且更轻量。
-
<ol><li>要实现鱼钩真实摆动，核心是使用HTMLCanvas结合JavaScript模拟钟摆物理；2.通过requestAnimationFrame创建游戏循环，实现流畅动画；3.在每一帧中清除画布、更新钩子角度与角速度、重新绘制鱼线和钩子；4.利用角加速度=-gravity/lengthsin(angle)模拟重力，角速度乘以阻尼系数实现摆动衰减；5.点击屏幕时赋予钩子初始角速度模拟抛竿动作；6.钩子末端坐标通过三角函数计算：tipX=x+lengthsin(angle)，
-
JavaScript实现组件化开发，核心是封装可复用、职责单一、接口清晰的代码单元；React组件通信的本质，是在不同生命周期、不同嵌套层级、不同数据流向中，安全、可控地传递状态和行为。用函数/类封装+props实现基础组件化组件化不是React专属，原生JS就能起步：把UI片段（如按钮、表单、卡片）抽成独立函数或类，接收配置参数（props），返回DOM节点或字符串模板。例如：写一个renderButton(text,onClick)函数，只关心“显示什么”
-
使用rgba()可设置CSS半透明背景，语法为rgba(红,绿,蓝,透明度)，其中RGB值范围0-255或百分比，Alpha范围0-1；2.将rgba()应用于background-color属性可实现仅背景透明而子元素不受影响的效果；3.常用于图片叠加蒙版、弹窗背景、按钮悬停等场景，如通过伪元素添加黑色半透明层提升文字可读性；4.rgba()兼容性好且仅作用于背景色，若需整体透明应使用opacity。
-
使用clear属性或clearfix方案可解决浮动导致的父容器高度塌陷问题，推荐现代布局flexbox或grid以避免此类问题。
-
使用pako库或CompressionStreamsAPI可实现JavaScript中文件的压缩与解压，适用于前端资源优化。pako支持gzip、deflate等格式，兼容性好；现代浏览器可使用内置的CompressionStreamsAPI进行Brotli等格式的流式压缩解压，性能更优。处理时需注意文本编码统一使用TextEncoder/TextDecoder，大型JSON数据可先序列化再压缩，读取时逆向操作。根据环境选择方案：旧浏览器用pako，新环境优先考虑原生API以提升效率。
-
JavaScript国际化API以Intl对象为核心，提供DateTimeFormat、NumberFormat、Locale等构造器，支持日期、数字、货币、语言协商及复数/列表格式的标准化本地化处理，无需硬编码规则。
-
实现盒子层叠需用CSS定位与层叠控制：一、position+z-index；二、负margin；三、transform位移；四、嵌套+opacity+pointer-events；五、clip-path裁剪配合z-index。
-
localStorage永久保存数据，sessionStorage仅在当前标签页会话有效；前者适合用户偏好等跨会话信息，后者适合表单草稿等临时数据；均受同源限制且仅支持字符串，禁存敏感信息。
-
:active伪类可实现点击时的原生样式反馈，需设置cursor:pointer、viewportmeta及touch-action:manipulation确保移动端生效；其声明须置于:hover/:focus之后，并配合transform、box-shadow等增强按压感，但无法通过JS触发且disabled时失效。
-
使用transform:scale放大搜索框仅改变视觉尺寸，不调整交互区域，需通过transform-origin、will-change、容器包裹、transition动画及热区校准等方法确保布局稳定与操作准确。
