-
使用fr单位、minmax()函数及auto-fit实现列宽自动调整。1.fr按比例分配剩余空间，如1fr和2fr将容器分为三份。2.repeat(auto-fit,minmax(150px,1fr))使列数随容器宽度变化，每列最小150px，最大1fr。3.max-content根据内容宽度设置列，auto填充剩余空间。4.建议结合gap和min-width优化布局，确保响应式效果。
-
HTML5HistoryAPI的state不加密且不持久化，所谓“加密”需开发者手动实现；应仅存必要标识符并由服务端校验，避免前端加密敏感数据。
-
height:100%无效是因为父容器高度为auto，无计算基准；需逐级设置height:100%或改用min-height:100vh/100dvh，或通过absolute、flex:1、grid1fr等替代方案实现撑满。
-
本文介绍如何使用Joi的keys()方法安全复用基础对象Schema的字段定义，避免意外继承.xor()、.messages()等链式配置，实现灵活、可组合的Schema扩展。
-
侧边栏收缩展开通过CSS控制宽度与外边距，结合transition实现动画效果。1.结构包含sidebar和content区域；2.默认sidebar宽200px，content左margin同步设置；3.添加collapsed类使sidebar宽度变为60px，隐藏菜单项，contentmargin相应缩小；4.JavaScript点击toggle-btn切换collapsed类，实现交互；也可用:hover悬停触发。关键在于width与margin联动、过渡动画及状态类控制，注意overflow隐藏与
-
for循环适用于明确迭代次数或需索引控制的场景，如数组遍历、生成固定序列、倒计时及嵌套操作；while循环则用于条件不确定、依赖动态判断的重复执行。
-
CSS引入失败需四步排查：路径是否正确（优先绝对路径）、Network中状态码与Content-Type是否为200/text/css、link是否在head中且未被JS移除、选择器是否匹配或被覆盖。
-
ES6模块是原生静态系统，import必须顶层声明；exportdefault与具名export需严格匹配导入方式；Node.js启用ES模块需满足.mjs扩展名或"type":"module"；import.meta.url是获取模块路径的唯一可靠方式。
-
先实现文件选择与上传核心功能，再扩展进度反馈、错误处理与配置化。通过监听input的change事件获取文件，使用FormData和fetch上传，结合XMLHttpRequest的onprogress实现进度条，封装为支持自定义参数（如上传地址、大小限制）的类，提供addFile、start等方法，内置文件校验，兼容现代浏览器并优化性能，逐步支持断点续传与并发控制。
-
掌握CSS中transition与z-index协同技巧，可避免动画卡顿和层级错乱。1.z-index仅对定位元素生效，动画前应提前设置高z-index，且不在transition中包含z-index变化；2.确保动画元素所在父容器具备独立堆叠上下文，必要时通过transform:translateZ(0)等方式创建新层；3.模态框显示时先设z-index和visibility，再触发动画，隐藏时反向操作；4.卡片悬停提升层级时，hover前预设z-index目标值，配合transform实现跃出效果。关
-
选defer还是async取决于脚本是否依赖DOM或其他脚本：defer等HTML解析完按序执行，适合操作DOM或有依赖的外部脚本；async下载完立即执行、无序，适合独立第三方脚本；默认同步加载会阻塞渲染，应避免。
-
使用flex-wrap和gap可创建响应式按钮组：通过display:flex、flex-wrap:wrap实现换行，gap统一间距，无需媒体查询即可在不同屏幕下自动调整布局。
-
text-emphasis属性通过添加强调标记为文本提供非侵入性视觉提示。1.它由text-emphasis-style和text-emphasis-color组成，支持dot、circle等样式或自定义字符；2.适用于数据校验、术语标注、内容审核等场景，不干扰文本原有样式；3.浏览器兼容性较好，现代浏览器普遍支持，IE需降级处理；4.存在西文排版冲突、样式灵活性不足及可访问性限制，需结合line-height调整、伪元素或语义化HTML应对。
-
ITCSS六层顺序不可调换，因决定CSS加载与权重优先级：settings/tools最前（变量/函数），generic次之（全局重置），objects/components居中（布局/组件），trumps垫底（工具类）；@import或@use必须严格按层归类导入，objects与components需分离结构与视觉职责，trumps禁用语义名且仅含单一行为样式。
-
事件委托通过在父元素绑定单个监听器替代为大量子元素分别绑定，显著减少内存占用；它依赖事件冒泡和closest()精准定位目标元素，适用于动态列表等场景，但不适用于少量静态元素或需精细控制监听器生命周期的情况。
