-
最直接方案是display:inline-block，但需处理空白符缝隙；现代推荐flex（需设flex-wrap:nowrap）或grid（需定义grid-template-columns）；float已淘汰。
-
纯CSS可关闭侧边抽屉用checkbox+label+:checked实现，需确保ID与for匹配、避免display:none影响过渡、用transform/visibility控制显隐，注意移动端触控优化及IE11兼容性。
-
通过结合CSS的transition、transform与Flexbox、Grid布局，可实现高效流畅的动画交互。首先transition定义过渡效果，transform执行旋转缩放等视觉变化，二者配合用于按钮悬停、菜单展开等场景；在Flexbox中利用transform实现元素浮起动画，不触发重排，性能优越；Grid布局虽不支持grid属性直接动画，但可通过transition平滑切换class状态，配合transform实现模块扩展效果；实际应用中应优先使用GPU加速属性如transform和opac
-
float:left虽可使页码横排，但导致父ul塌陷、边框错位、hover跳动；推荐flex布局替代，简洁可靠，现代项目应优先采用。
-
-webkit-line-clamp仅在display:-webkit-box且-webkit-box-orient:vertical时生效，缺一不可；Firefox不支持，需JS回退；现代CSSline-clamp仍需前缀或实验性启用。
-
在HTML5中定义JavaScript函数需在<script>标签内：一、用function声明命名函数（可提升）；二、赋值匿名函数给变量（不提升）；三、用箭头函数简化表达式；四、挂载到window实现全局调用；五、用DOMContentLoaded确保DOM就绪后执行。
-
核心是“本地暂存+状态标记+冲突可控上行同步”：用IndexedDB（或Dexie.js）存草稿，含isSynced等字段；三态管理（draft/syncing/synced）；客户端生成clientOpId与contentHash实现幂等；online时异步限速同步，多标签页一致。
-
使用CSS属性选择器input[type="text"]可精准设置文本输入框样式，如宽度、内边距、边框、圆角、字体等，并通过:focus添加聚焦效果；该选择器仅作用于type为text的输入框，避免影响email、password等其他类型，兼容性良好，推荐统一使用小写无空格的引号格式。
-
CSS响应式断点机制通过“断点前缀+类名”组合实现，如md:text-center；主流框架默认提供sm/md/lg/xl/2xl五级断点，需在配置中定义，未声明则不生成；失效常见原因包括缺失viewport标签、未定义断点名、按需构建未触发类生成。
-
最稳妥方式是直接设置document.documentElement.style.fontSize，所有rem元素自动缩放；禁用body.style.fontSize、zoom和transform:scale()等错误方案。
-
本文详解如何通过精确控制background-size与background-position的百分比关系，创建视觉上连续、无跳变的无限横向滑动背景，彻底解决传统cover+线性动画导致的重置闪烁问题。
-
可在HTML5中通过img标签嵌入GIF、CSSbackground-image设置背景GIF、CSS关键帧动画模拟GIF，以及添加加载失败备用方案来实现动态效果。
-
事件传播包括捕获、目标和冒泡三个阶段，事件从document向下传递至目标元素再向上返回；默认在冒泡阶段触发监听器。通过设置addEventListener的第三个参数为true可于捕获阶段监听。事件委托利用冒泡机制，将事件绑定到父元素上，通过e.target识别实际触发元素，从而减少内存占用、支持动态元素并简化维护。例如为列表父元素绑定点击事件即可处理所有子项点击。使用e.stopPropagation()阻止事件继续传播，e.stopImmediatePropagation()additionally
-
必须禁用双击缩放并适配安全区域：在HTML中添加viewport禁用缩放，Native端关闭scrollView回弹或侧滑返回；H5与Native通信需用WKScriptMessageHandler或JSBridge加密传输密码；触摸坐标须用getBoundingClientRect计算相对位置，并在capture阶段绑定touchmove事件。
-
进度条宽度动画需避免静态类切换，改用内联style.width配合transition-all或自定义@keyframes；容器与填充层须分离，外层overflow-hidden，内层动态更新宽度；性能优化推荐requestAnimationFrame和transform:scaleX()。
