用盒模型和 Flex，整理一张关于我卡片

01先让内容分组清楚

一张关于我卡片通常包含标题、头像、介绍和链接。开始写样式前，先确定哪些内容属于同一个区域：用 section 包住整张卡片，再用一个容器把头像与文字组放在一起。这样，布局规则才有清楚的作用对象。

这个练习给外层设置 card 类，给头像和文字的共同父级设置 profile 类。类名本身不会产生视觉效果，它只是让 CSS 能选中对应元素。文字和链接再放进同一个分组，就能作为一个整体与头像排列。

02用盒模型理解留白

把卡片看成一个盒子：内容在中间，padding 是内容到边框的距离，border 是边框，margin 则控制盒子与外部元素之间的间距。它们都能制造空白，但改变的位置不同。

练习时把 padding 从 24px 调到 40px，最明显的变化是内容离卡片边缘更远。若卡片有背景色，可以直接观察这段空间。调整 margin-top 则会改变卡片与上方内容的距离，不会增加卡片内部的留白。

.card {
  padding: 24px;
  margin-top: 24px;
  border: 1px solid #d6e0ef;
  border-radius: 12px;
}

03让头像和文字并排

给 profile 设置 display: flex 后，它的直接子元素开始按 Flex 规则排列。默认横向排列时，头像是一项，文字组是另一项；gap 控制两项之间的距离，align-items: center 让它们在垂直方向居中。

头像不应该因为文字变多而被挤成窄条，可以给它设置 flex-shrink: 0。Flex 处理的是父容器与直接子元素之间的关系，所以先把文字和链接分成一组，会比给每个段落分别定位更容易维护。

.profile {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile img {
  flex-shrink: 0;
}

04窗口变窄，布局也跟着变

横向排列在宽屏上自然，窄屏却可能压缩文字空间。这个例子在视口宽度不超过 600px 时改为纵向：头像在上，文字在下，并把卡片内边距调小一些。600px 是这份练习选用的断点，并不是所有手机的统一宽度。

验证时缓慢拖动窗口，而不是只看最大和最小两种尺寸。同时检查长链接是否溢出、文字是否贴边、图片是否变形。布局的目标是让同一份内容在不同空间里都容易阅读。

如果不确定是哪条样式产生效果，可以每次只调整一个值：先改内边距，再改元素间距，最后切换排列方向。观察变化的位置，比一次粘贴很多规则更容易建立对布局的直觉。

@media (max-width: 600px) {
  .profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .card {
    padding: 24px;
  }
}