HTML 与 CSS 入门笔记：从语义化标签到盒模型

这是我学网页制作第一阶段整理的笔记。当时最大的困惑不是「怎么写出来」，而是「为什么要这么写」， 所以这篇笔记重点记录的是每个知识点的用意，而不是罗列属性表。

一、一个最小可运行的页面骨架

先把最小的页面写出来，能看到内容再谈样式，这样出问题也容易定位：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一篇笔记</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>今天学了什么</h1>
  <p>把学到的东西用自己的话写一遍。</p>
</body>
</html>

• <!DOCTYPE html>：告诉浏览器用标准模式渲染，漏写可能进入怪异模式，盒模型计算方式都不一样。
• lang="zh-CN"：中文页面必须写，屏幕阅读器和搜索引擎都依赖它。
• charset="UTF-8"：写在 head 最前面，避免中文乱码。
• viewport：手机上没有它，页面会按 980px 宽度渲染再整体缩小。

二、语义化标签到底解决了什么

一开始我觉得全部用 div 也能显示出同样的效果，直到我把页面用浏览器的「阅读模式」打开， 发现一堆 div 的页面完全解析不出结构。语义化的价值主要有三点：

1. 给人看：结构清晰，隔几个月回来还能看懂自己的代码。
2. 给机器看：搜索引擎按 h1、article、nav 判断内容主次。
3. 给辅助设备看：屏幕阅读器依赖标签语义来跳转和朗读。

我自己的判断方法：如果这块内容单独拿出去还能读懂，用 article； 如果它只是主内容里的一个章节，用 section；如果只是为了排版找个盒子，那就用 div。

三、盒模型：一个元素占多大地方

盒模型由内到外分四层：内容 content → 内边距 padding → 边框 border → 外边距 margin。

最容易踩坑的是宽度计算。默认 box-sizing: content-box 时：

/* 实际占位宽度 = 300 + 20*2 + 1*2 = 342px */
.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #e3e7ec;
}

加上 box-sizing: border-box 之后，width 就是「内容 + 内边距 + 边框」的总宽，布局好算得多：

*, *::before, *::after {
  box-sizing: border-box;
}

我在写这个网站时就采用了 border-box，配合一个 .wrap 容器控制最大宽度， 两侧留出内边距，移动端不用额外处理。

四、外边距塌陷与合并

这是让我调试了很久的一个问题：给子元素加 margin-top，结果整个父元素跟着往下走。

.parent { background: #eef; }
.child  { margin-top: 30px; }   /* 父元素整体被推下去了 */

原因是父子之间没有隔开时，外边距会发生合并。常见的解决办法有三种：

• 给父元素加 overflow: hidden 或 display: flow-root 触发 BFC；
• 给父元素加一点 padding-top 或 border-top；
• 直接改用 padding 来控制内部间距，这也是我后来最常用的做法。

另外要记住：垂直方向相邻的 margin-bottom 与 margin-top 会合并，取较大值；水平方向不会合并。

五、布局方式的选择顺序

按我现在的学习进度，我给自己定了一个简单的选择顺序：

1. 一维排列（一行几个按钮、一排导航）→ flex
2. 二维布局（主内容 + 侧栏这种整页结构）→ grid
3. 局部覆盖（弹窗、回到顶部按钮）→ position

/* 这个网站的主布局就用了两行 grid */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

minmax(0, 1fr) 里的 0 很关键：如果写成 1fr， 文章里出现长代码块时列宽会被内容撑破，导致横向滚动条。

六、这次练习的收获

• 先把结构写对，再谈好看；语义化不是形式，而是可维护性。
• border-box 和 BFC 能解决八成 layout 上的怪问题。
• 移动端适配用「桌面优先 + 断点收窄」或「移动优先 + 断点增强」都行，但一个项目里要统一。
• 写不出来就说明没懂，能讲清楚才算学会了——这也是我坚持写笔记的原因。