-
答案：现代前端构建需选合适工具并持续优化。Webpack适合大型项目，Vite提升开发体验，Rollup优打包库，Parcel快速上手；通过代码分割、TreeShaking、压缩、缓存和依赖优化提升性能，结合分析工具与CI/CD实现持续优化。
-
单例模式的本质是逻辑约束而非语法限制，确保类在整个应用生命周期中仅初始化一次且返回同一实例；适用于配置管理、日志器等跨模块共享组件，不适用于需多实例的场景。
-
HTML5原生验证属性够用但不够稳，需结合JS实现可控、实时、可本地化的校验；建议用原生属性兜底，JS主导验证流程，分离规则与提示，控制反馈时机，并约定前后端错误字段结构。
-
同步指代码按顺序执行，前一个任务未完成时后一个任务需等待。JavaScript是单线程语言，同步操作依次执行，如变量赋值、函数调用等；若某操作耗时长，程序会阻塞，导致界面无响应，例如使用alert()或执行大量循环时会阻塞后续代码。
-
本文详解克隆网站时CSS不生效的常见原因（尤其是跨域字体加载失败），并提供Apache环境下通过CORS配置解决Web字体阻塞的完整方案。
-
position不该作为HTML5布局主力，因其导致脱离文档流、父容器塌陷、响应失效；应限于悬浮按钮、下拉菜单、tooltip等局部定位；现代布局首选Grid和Flexbox。
-
required属性仅在表单提交或调用checkValidity()时触发验证，失焦（blur）不自动校验；pattern值为纯字符串，不可带斜杠和flag；type="email"/"url"验证宽松，仅作基础格式筛查；validity对象需细查具体属性定位错误原因。
-
::marker伪元素可用于修改列表项标记的颜色、大小等内容，主要支持有序和无序列表的样式定制。通过color、font-size等属性可调整外观，content可替换无序列表符号，如改为短横线；对于有序列表编号的深度自定义，则需结合CSS计数器与::before配合display:marker实现，如生成“第1条”格式；需注意::marker不支持背景、边框等属性，且IE不兼容，复杂效果建议用::before模拟。
-
:nth-last-of-type(n)用于从父元素末尾开始选择倒数第n个指定标签类型的子元素。例如p:nth-last-of-type(1)选中最后一个p元素，li:nth-last-of-type(2)选中倒数第二个li。结合CSS计数器可实现倒序编号：通过counter-reset定义计数器，counter-increment设为-1实现递减，再用::before插入编号。也可对末尾元素单独设置样式，如p:nth-last-of-type(-n+2)隐藏最后两个段落，li:nth-last-of-t
-
根本原因是未统一声明transition导致属性重绘不一致；应为真正触发样式的元素（如li或a）显式设置相同duration、timing-function的transition，仅包含color、background-color、transform、box-shadow等可GPU加速属性。
-
掌握float与padding配合技巧可实现兼容旧浏览器的多栏布局。通过box-sizing:border-box避免宽度溢出，用父容器padding替代margin创建安全间距，并结合clear清除浮动影响，提升布局稳定性。
-
JavaScript是动态类型语言，变量类型由值决定而非声明方式，检测需用typeof等运行时方法，应避免==隐式转换，类型约束需借助TypeScript。
-
本文详解如何在Netlify等静态托管平台中正确配置FormSubmit，重点解决「表单提交后页面跳转」「邮件收不到数据」「后台无记录」等常见问题，并强调name属性的强制性要求与完整实现方案。
-
cover等比缩放完全覆盖容器可能裁剪，contain等比缩放完整显示在容器内可能留白；防变形多用cover，全显图才用contain；需配合background-position控制裁剪区域。
-
文本居中用text-align:center；块级元素需设宽后用margin:0auto水平居中；Flexbox通过justify-content和align-items实现整体居中。
