直接用、、、、替代等无意义容器，可提升seo、可访问性与可维护性；须有标题且主题独立，用于可独立分发内容，仅适用于与主内容相关的补充信息。

怎么用语义化标签代替一堆 <div> 堆砌 <p>直接用 <code><header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 替代无意义的 <div class="header">，不是为了“看起来高级”，而是让屏幕阅读器、搜索引擎和后续维护者一眼看懂结构。 <p>常见错误是把 <code><section></section> 当成万能容器乱套——它只适用于有明确主题、可独立成节的内容（比如一篇博客里的“技术细节”小节），不是所有区块都该用它。

• <article></article> 用于可独立分发、复用的内容（如新闻条目、博客文章）
• <aside></aside> 不等于“右边那块”，而是指与主内容相关但非核心的补充信息（比如侧边的作者简介、术语解释）
• 多个 <nav></nav> 是允许的（例如页头导航 + 页脚快捷链接），但每个都应有明确目的

Flexbox 布局时 flex-direction 和 justify-content 怎么配才不翻车

多数人卡在“为什么我设了 justify-content: center 却没居中”——根本原因是没确认主轴方向。Flex 默认主轴是水平（flex-direction: row），此时 justify-content 控制水平对齐，align-items 控制垂直对齐。

一旦改成 flex-direction: column，主轴变成垂直，justify-content 就管上下，align-items 管左右。容易混淆的点：

• 想让子元素在容器里垂直居中 + 水平居中？用 justify-content: center + align-items: center，前提是主轴是 row
• 想让一列按钮从上到下等间距？设 flex-direction: column，再用 justify-content: space-between
• 父容器没设高度，align-items: center 可能无效——因为交叉轴没有可用空间，得给父容器加 min-height: 100vh 或显式高度

Grid 布局里 grid-template-columns 的数值写法差异

repeat(3, 1fr)、1fr 1fr 1fr、minmax(200px, 1fr) 2fr 看似都能实现三列，但行为完全不同。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

关键区别在于响应性和收缩逻辑：

• 1fr 1fr 1fr：三列均分剩余空间，最小宽度为 0（可能被压缩到看不见）
• repeat(3, minmax(300px, 1fr))：每列至少 300px，超出部分按比例分配，更安全
• 200px 1fr 200px：固定侧边栏 + 自适应中间区，适合经典三栏布局
• 用 auto-fit + minmax() 实现响应式卡片流：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))

为什么 position: absolute 容易导致布局失控

绝对定位本身没问题，问题出在“最近的已定位祖先”这个前提常被忽略。如果父容器没设 position: relative，元素会往上一直找，最后相对于 定位，位置飘忽不定。

典型场景和避坑点：

• 下拉菜单、弹窗这类需要脱离文档流的组件，必须确保其直接父容器有 position: relative
• top: 0 + right: 0 在不同祖先下含义不同——先确认坐标系源头
• 用 position: sticky 替代部分 absolute 需求（比如吸顶导航），它既保持文档流又具备粘性，兼容性也够用（Chrome 56+、Firefox 59+、Safari 15.4+）

语义化标签和 Flex/Grid 不是二选一，而是分层协作：HTML 结构定骨架，CSS 布局填血肉。最容易被忽略的是——哪怕用了 Grid，如果 <main></main> 里塞了一堆没意义的 <div>，依然算不上真正结构化。</div>