-
本文详解如何通过纯CSS媒体查询与JavaScript交互，构建一个仅在768px及以下屏幕显示、点击后垂直展开全宽导航列表的响应式汉堡菜单，并解决下拉项错位、间距失控及容器未占满等问题。252 收藏 -
用rem实现缩放的本质是动态修改html的font-size，而非CSS自动响应屏幕变化；不依赖JS或媒体查询，rem本身不具备自适应能力。252 收藏 -
答案是使用标签或CSSwhite-space属性处理HTML换行。通过替换\n为实现换行显示，或用pre、pre-line、pre-wrap等CSS属性保留格式，用户输入需先转义再转换，确保安全与效果兼顾。251 收藏 -
必须调用event.preventDefault()阻止表单默认提交，校验逻辑须在submit事件中执行；优先使用input.checkValidity()和validityAPI；错误信息需绑定到对应字段并用aria属性增强可访问性；前后端字段名必须严格一致。251 收藏 -
inline-block元素间缝隙源于HTML将换行/空格解析为文本节点并渲染为空白，而float通过脱离文档流规避该机制；现代布局应优先使用flex或grid，仅IE8–9等旧环境才考虑float。251 收藏 -
需显式为父容器设置container-type:inline-size（或size）才能启用容器查询，否则@container规则静默失效；它监听父容器实际渲染尺寸，非视口，且仅作用于直接父级块级元素。251 收藏 -
nav包裹ul是最稳妥的垂直导航栏HTML结构，语义正确、支持键盘导航与屏幕阅读器识别；li中放a保证Tab可聚焦，分组标题用h3或aria-disabled="true"的a；CSS需重置ul默认边距，a设display:block/flex确保hover热区完整。251 收藏 -
应内联关键CSS并异步加载非关键CSS：用critical或critters提取首屏必需样式（≤14KB），通过rel="preload"onload注入非关键CSS，禁用预处理器抽象和低效选择器，避免弱网检测延迟。251 收藏 -
padding是内容到边框的距离，影响自身尺寸和背景显示；margin是边框到邻元素的距离，不参与自身渲染；box-sizing控制padding是否撑大元素，border-box为现代开发首选。251 收藏 -
模板字面量是JavaScript中用反引号包裹的字符串，支持变量插值（${expression}）、多行书写及标签函数，提升可读性、安全性与灵活性。251 收藏 -
真正可读的文章页需控制视线移动成本：行宽≤65ch、行高1.5–1.6、段间距＞行高；标题用font-weight:600+渐进字号+足够下边距；图片/引用/代码块须独立呼吸空间；移动端强制最小字号、适配窄列与触控区域。251 收藏 -
HTML5不支持嵌套表单，因规范禁止form嵌套，浏览器会自动修复DOM导致外层闭合；应使用novalidate、formnovalidate、动态属性控制或JavaScript自定义验证实现分层校验需求。251 收藏 -
IntelliJIDEA可通过“OpeninBrowser”功能预览HTML文件，具体步骤：创建HTML文件后右键选择在浏览器中打开，可配合LiveServer插件实现保存自动刷新，提升前端开发效率。251 收藏 -
选择器权重是CSS特异性规则，以三元组(a,b,c)表示：a为内联样式数、b为ID数、c为类/属性/伪类数；权重高者生效，而非后写覆盖。251 收藏 -
计算属性是基于惰性effect的缓存型响应式机制：首次访问时执行getter并收集依赖，后续依赖未变则返回缓存值；依赖变化时仅标记dirty，下次读取才重算并更新依赖关系，支持动态精确收集与多级响应链接。251 收藏
