-
Flexbox是一维布局，适合组件级排列，如导航栏或按钮组；Grid是二维布局，适合页面级设计，如仪表盘或复杂网格。1.Flexbox沿主轴排列元素，适用于动态内容；Grid可定义行列和区域，实现精确控制。2.Flexbox用于按钮对齐、等高列；Grid用于侧边栏布局、模块化界面。3.Flexbox依赖流动排列，通过justify-content和align-items控制对齐；Grid使用grid-column、grid-row定位，支持命名区域。4.Flexbox通过flex-wrap换行适应屏幕；G
-
:first-child和:last-child不生效是因为它们只匹配父元素的第一个/最后一个子节点，不区分类型；若首个子节点是注释或空格文本，则li:first-child不触发。
-
try-catch仅捕获同步运行时异常，无法处理语法错误、Promise拒绝或异步回调错误；应精准包裹明确可能抛异常的同步操作（如JSON.parse），按错误类型分类处理，异步场景需配合.catch()、await+try-catch或unhandledrejection监听。
-
移动端input默认不占满父容器，需显式设置width:100%并配合box-sizing:border-box；注意软键盘缩放、字体继承及真机测试。
-
iPad上HTML5读取本地CSV/Excel乱码的根本原因是FileReader默认UTF-8解析而文件实为GBK等编码，且Safari不支持GBKTextDecoder及readAsText编码参数；应改用readAsArrayBuffer+iconv-lite解码，并用PapaParse安全解析CSV，最后校验字段对齐。
-
:empty伪类用于选择无子元素或内容的元素，可隐藏空提示容器、标识表格空单元格、设置动态内容占位符；需注意其严格判定规则，仅匹配完全空白的元素，含空格、换行或注释均不匹配。
-
使用CSS浮动实现图文混排，通过float:left或right使文字环绕图片，配合margin、border-radius优化视觉效果，并用clear:both或BFC清除浮动，确保布局稳定，适用于文章页等文本密集场景。
-
用transition实现自然悬停效果需明确指定属性、合理设置时长与缓动曲线，并确保初始和hover状态值可插值，transition必须写在非hover的原始状态中。
-
表单提交后页面刷新需调用event.preventDefault()阻止默认行为，或配置action指向后端；务必为控件添加name属性，声明UTF-8编码，后端校验内容并防刷。
-
首先确保HTML文件保存为UTF-8编码，使用文本编辑器另存为UTF-8格式；其次在命令行执行chcp65001切换至UTF-8代码页后再运行Prettier；接着在VSCode中设置files.encoding为utf8并启用files.autoGuessEncoding；最后可通过Node.js脚本显式以UTF-8读写文件，调用Prettier完成格式化。
-
Sass中无法用map-get($config,'colors.primary')直接取嵌套值，必须逐层调用或封装deep-map-get函数；注意key类型匹配、空值防护及配置结构统一。
-
本文详解React项目中通过原生<video>标签嵌入并播放本地MP4视频的完整实践，涵盖路径配置、静态资源处理、常见加载失败原因及解决方案。
-
惰性函数是在首次调用时完成初始化并重写自身、后续调用直接执行优化逻辑的函数；它通过首次判断环境后替换函数引用，避免重复检测开销，适用于高频调用且判断逻辑较重的场景。
-
使用nano编辑器可快速创建HTML5网页模板：一、通过nano手动输入标准结构，包括DOCTYPE、html、head、body等标签；二、利用快捷键复制粘贴提高效率，如Ctrl+Shift+C复制、Ctrl+Shift+V粘贴；三、预先保存template.html模板文件，用cp命令复制生成新页面，再用nano编辑。
-
用CSSflex的order属性可灵活调整模块视觉顺序而不改HTML，需父容器设display:flex，order默认0、值越小越靠前，支持负数和媒体查询动态控制，但不改变DOM顺序、可访问性及SEO。
