用浏览器可视化调试样式，再把修改保存到代码

TL;DR：AI 搭好了网页，但标题位置和间距还不合心意；在浏览器里右键「检查」，找到包住名称和副标题的那一层，改成横向排列，再调整对齐与间距，边改边看效果；把两行文字调成一行后，将满意的样式写回项目文件，因为浏览器里的临时修改刷新后会消失，关闭工具不等于保存。

Note

AI 能帮我们快速搭建网页，但初稿中的排版不一定完全合心意。 与其反复描述“再往右一点”，不如先在浏览器里试出效果，再把确定的修改保存下来。

🎯 这次只解决一个问题：把博客名称与副标题从上下两行，调整到左右一行。 案例来自个人博客，方法也适用于按钮、导航和表单。

西蒙的有限理性指出，人受知识和计算能力限制，难以穷尽所有选项。对应到调样式，与其一次想清整套布局，不如先限定一个可观察目标：只看这两段文字是否排到一行。这样更容易判断下一步。理论来源

对比取自两次操作截图，左侧蓝色是开发者工具的选中高亮。看位置关系，不把高亮颜色当作页面设计。

1. 🔎 先选对位置，再考虑改什么

环境是 Mac 上的 Chrome。右键目标文字 →「检查」，或按 ⌘ + ⇧ + C 后点击目标；Windows 使用 Ctrl + Shift + C。左边看页面，右上看结构，右下看样式。先选中包住两段文字的那一层，才能一起安排它们。

这里的 .brand 是类名为 brand 的元素；名称和 p.eyebrow 副标题都在它内部。省略其他内容后是：

html<a class="brand" href="/">
  Boji
  <p class="eyebrow">BOJI'S JOURNAL 随记 / 实践 / 思考</p>
</a>

Important

先确认副标题真的在 .brand 内。 如果它还在正文区域，只改品牌的 CSS，不能把别处的内容搬过来。需要先调整 HTML 的容器关系。

下面这张首页截图就是另一种起点：副标题在页头下面的正文区。它与上面的练习结构不同，不能照抄一个属性就期待同样结果。

《庄子》的庖丁解牛讲的是顺着对象的结构下手。借这个比喻，调页面也应先看嵌套关系：外层页头安排品牌和导航，内层品牌安排名称和副标题。 先辨清层次，才知道该改哪个容器。原文线索

选中 a.brand，在右下「样式」找到 .brand。双击 inline-block，改为 flex，按回车确认。 如果没有这条声明，可点击 element.style { } 的空白处添加。

css

display: flex;

inline-block 影响这个盒子如何参与外部排列，里面的段落仍可能换行；flex 默认让内部内容横向排列。这次要改变的是内部排列。

图左是原来的类规则，图右是在当前元素上试验的样式。两种入口都可以试，但最终都要整理回代码。

皮尔士的实用主义准则，用可设想的实践后果澄清概念。对应到这里，理解 flex 不必止于背定义：把它打开、关掉，观察两段文字怎样变化。抽象术语就有了可辨认的含义。概念来源

Tip

一次只改一个值。 先解决排列方向，再改对齐，最后改间距。样式行左边的复选框可以临时开关声明，方便对照。

点击规则末尾、右花括号上方的空白处，输入属性名，按 Tab 输入值，再回车。

字号不同时先试基线对齐，即 align-items: baseline；想让盒子垂直居中，再试 center。两者都可能合理，取决于你希望哪条线对齐。

间距先试 12px，再和 8px、16px 比较。不必同时改字号、位置和颜色。

这是独立标签页中的结构演示，正文区域原有副标题仍保留；只观察页头的排列与右下三条声明。

经济学里的机会成本提醒我们，反复磨一个像素，也会挤占检查其他页面的时间。这里可以先定停止条件：两段文字排好、间距舒服、导航没被挤坏，就进入保存与窄屏检查。这个取舍比无止境试数值更有用。

《荀子·劝学》用积累小步说明学习如何推进。放到这次练习里，每次只改一个属性，再记住它对应的视觉变化，就能把一次偶然试对变成下次可复用的经验。原文

点击结构中的 p.eyebrow，确认底部路径也显示它，再在 element.style 添加：

css

margin: 0;

margin 是元素外侧的空白；段落默认样式或项目规则可能带来上下间距。先清零，再看是否需要加回。 父元素管排列，副标题自身管外边距。别把页头或正文所有段落一起清零。

Important

开发者工具里的临时修改通常刷新就会消失。 关闭开发者工具不等于保存。先把修改写回项目，再重新加载检查。

在项目中搜索 .brand，将试出的声明合并到现有规则。保留原来的字号、颜色等未调整属性；不要把整个全局样式文件替换成这几行。若练习中还改过 HTML，容器关系也要同步保存。

css.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand .eyebrow {
  margin: 0;
}

如果项目使用组件样式或构建工具，把它写入对应的源文件，再运行项目原有预览命令。保存后检查三件事：刷新仍然保持；缩窄窗口不挤坏导航；其他共用 .brand 的页面仍正常。

这张图来自本地最小示例，展示文件加载后的效果，不代表线上博客已经发布。实际项目在窄屏可能需要允许换行或恢复上下排列。

波普尔强调理论应能接受可能推翻它的检验。这里可以借用这个思路：“已经保存成功”需要接受刷新检验，而不只凭当前画面确认。 刷新丢失说明仍有保存链路没走完。概念来源

Tip

最有用的三件事：找对容器，一次改一个变量，把结果写回源文件。 遇到没效果，先检查选中了谁；遇到刷新丢失，回查保存步骤。先抓住这两类判断，就能排除很多常见弯路。

✅ 下次再调页面，可以保留一张前后对比和几条有效声明。截图表达目标，代码保存结果；两者放在一起，自己复查或交给协作者继续都更清楚。

— 完 —