grid是唯一能同时约束行和列的布局模型，适合页眉+侧边栏+主内容区+页脚结构；外层用grid-template-areas定义区域，主内容区内按需用flexbox或嵌套grid；表格与表单须平级并通过form属性关联；模块需有明确容器边界与通信契约；响应式断点应基于内容而非设备尺寸。

用 Grid 划分宏观区域，别一开始就套 Flexbox

Grid 是唯一能同时约束行和列的布局模型，适合后台这种“页眉 + 侧边栏 + 主内容区 + 页脚”结构明确的页面。Flexbox 在一维对齐上很稳，但强行用它堆多行多列，容易出现高度不一致、换行错位、响应式断点失效等问题。

常见错误现象：display: flex 套多层 flex-direction: column 后，某个模块内容变长，整个右侧栏被顶出视口；或者媒体查询里改了 flex-wrap，但子项宽度没同步收缩，导致横向溢出。

• 外层容器设 display: grid，用 grid-template-areas 定义命名区域，比如 "header header header" "sidebar main main" "footer footer footer"
• 每个区域对应一个语义化标签（<header></header>、<aside></aside>、<main></main>），避免用 <div class="sidebar"> 这类无意义包裹 <li>主内容区（<code><main></main>）内部再用 Flexbox 或嵌套 Grid，按需处理表单、表格、卡片等子模块

表格与表单共存时，别把 <form></form> 直接塞进 <table><p>HTML 规范禁止在 <code><table> 内部直接嵌套 <code><form></form> —— 浏览器会自动闭合 <form></form>，导致 DOM 结构断裂，JS 获取不到预期的表单元素。这不是兼容性问题，是解析规则本身。

正确做法是让 <form></form> 和 <table> 平级，通过 <code>form 属性关联控件。例如某行的编辑按钮触发该行数据提交，就把这一行里的所有 <input> 加上 form="edit-form"，而 <form id="edit-form"></form> 放在表格外面。

• 内联编辑场景：每行末尾放一个 <button type="submit" form="inline-form"></button>，所有可编辑单元格的 <input> 都带 form="inline-form"
• 主从模式：表格点击某行后，用 JS 把该行 data-id 填入右侧 <form></form> 的隐藏字段，不依赖 DOM 嵌套关系
• 筛选工具栏：顶部搜索表单独立存在，提交后 JS 读取值、发请求、重绘下方 <table>，两者完全解耦 <h3>多模块组合必须有明确的“容器边界”和“通信契约”</h3> <p>后台页面常把用户管理、日志列表、统计图表塞进同一页面，但没做隔离就容易互相污染：比如一个模块的 CSS <code>margin: 0 auto 影响了另一个模块的居中逻辑；或某个模块的全局事件监听器（如 document.addEventListener('click', ...)）误触其他模块行为。

  性能影响更隐蔽：没有边界意味着无法对模块做独立的 contain: layout style paint，浏览器重排重绘范围扩大，滚动卡顿明显。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 每个模块用独立的 <section></section> 包裹，并加唯一 id 或 data-module 属性
  • 模块内样式用 BEM 类名（如 user-list__item），避免使用通配符或层级过深的选择器
  • 模块间通信只走明确接口：比如通过自定义事件（dispatchEvent(new CustomEvent('user-selected', { detail: { id: 123 } }))），而不是直接操作对方 DOM

  响应式断点不是“写死 px”，而是“按内容撑开”

  很多后台模板把断点设成 @media (max-width: 768px)，结果在 iPad Pro（分辨率 2048×2732）上反而触发移动端样式——因为它的 viewport 宽度是 1024px，刚好卡在临界点。这说明断点不该基于设备，而应基于内容是否还能舒适阅读。

  真正要观察的是模块内部：表格列数太多时要不要折叠；表单标签和输入框能否并排显示；侧边栏图标是否挤成一行。

  • 优先用 min-width 而非 max-width，比如 @media (min-width: 1200px) 表示“当屏幕够宽、能放下三列时才启用三列布局”
  • 对表格用 overflow-x: auto 包一层 <div>，比强制隐藏列或缩写字体更可靠 <li>侧边栏收起逻辑不要只靠媒体查询，加 JS 监听 <code>resize 时检查 document.body.clientWidth，动态切换 collapsed 类

  最易被忽略的一点：Grid 的 fr 单位在嵌套时会逐层缩放，如果外层用 1fr 3fr，内层又用 1fr 1fr，第二层的两个 1fr 实际占比并不相等。调试时得打开浏览器开发者工具，看 computed 值里的 grid-template-columns 真实展开结果，不能只信代码写的字面意思。