黑马前端 2024 · 教程站

主题

盒子模型（四） ​

本页对应 盒子模型，共 7 段视频，约 43 分钟。

学习目标 ​

  • 能根据产品卡片与新闻列表效果图拆分父子、兄弟盒子结构，并使用 div、a、img、h4、p、ul、li 完成可预览的 HTML 骨架。
  • 能使用盒模型相关属性设置宽高、边框、背景色、padding、margin，并通过浏览器测量与刷新预览验证布局距离和尺寸。
  • 能区分并正确应用块级盒子水平居中 margin: 0 auto、文字/图片水平居中 text-align: center、垂直居中 line-height，完成卡片和新闻头部的居中效果。
  • 能使用 SVG 图片、背景图片、background-repeat: no-repeat 与内边距挤开文字，实现产品图标、新闻列表小图标及文字对齐。
  • 能使用后代选择器、行内元素转块级元素、hover 伪类、负 margin、单侧边框等完成新闻标签样式、鼠标悬停变色/下划线及边框覆盖细节，并验证样式不影响目标外元素。

知识点 ​

产品卡片效果图

效果与结构拆分 ​

为什么需要：产品卡片是“图片 + 标题 + 说明文字”的常见组合，先把结构拆清楚，后面写 CSS 才不会乱。怎么想：外层一个 .product 卡片盒子，里面按顺序放 img、h4、p。怎么做：先写 HTML 骨架，再按“盒子模型 → 文字样式 → 圆角、阴影等修饰”补 CSS。易错点：转写口述里的 card 对应笔记中的 product；A买地 是 img，talancenter 是 text-align:center，拍ing ontop 是 padding-top，mar疹 是 margin，代码以笔记为准。

html
<div class="product">
  <img src="./images/liveSDK.svg" alt="">
  <h4>抖音直播SDK</h4>
  <p>包含抖音直播看播功能</p>
</div>

CSS 书写顺序 ​

为什么需要：先定盒子大小和位置，再调文字，最后加圆角、阴影，改起来不容易反复。怎么想：卡片先有宽高、背景、内外边距；再处理标题和说明文字；最后加 border-radius。怎么做：按笔记顺序写：1 盒子模型属性；2 文字样式；3 圆角、阴影等修饰属性。易错点：一上来就写阴影、圆角，后面一改宽高又要回头调；本笔记成品只写了圆角，阴影不额外编造代码。

html
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background-color: #f1f1f1;
  }

  .product {
    margin: 50px auto;
    padding-top: 40px;

    width: 270px;
    height: 253px;
    background-color: #fff;
    text-align: center;

    border-radius: 10px;
  }

  .product h4 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #333;
    font-weight: 400;
  }

  .product p {
    font-size: 12px;
    color: #555;
  }
</style>

全局重置与页面背景 ​

为什么需要：浏览器默认给标题、段落带外边距，不重置会导致卡片内部间距不可控。怎么想：案例小，用通配符统一清掉默认 margin/padding，并用 border-box 让宽高包含内边距。怎么做：* { margin:0; padding:0; box-sizing:border-box; }，body 给浅灰背景突出白卡片。易错点：没有 box-sizing:border-box 时，给卡片加 padding-top 会把盒子撑高；重置后 h4 的默认间距也没了，需要自己补。

卡片盒子与居中 ​

为什么需要：卡片要在页面中水平居中，并且离顶部有距离。怎么想：.product 是块级盒子，水平居中用 margin: 50px auto；图片贴顶不好看，用父级 padding-top:40px 把内容整体往下挤。怎么做：给 .product 设 width:270px; height:253px; background:#fff; margin:50px auto; padding-top:40px; border-radius:10px;。易错点：给图片直接加 margin-top 可能涉及外边距合并/塌陷，初学阶段优先给父级 padding-top；padding 会占空间，必须配合 border-box。

图片、标题与说明文字 ​

为什么需要：三个子元素都要水平居中，逐个写很麻烦。怎么想：给父级 .product 加 text-align:center，文字和图片都继承居中；标题默认加粗，要改成常规字重。怎么做：h4 设 font-weight:400，用上下 margin 拉开距离；p 设更小字号和浅色。调试过程可理解为：先放图，发现不居中就给父级居中；图贴顶就量出约 40px 给父级 padding-top；标题太粗太挤就设 font-weight:400 并调上下边距；说明文字更小更浅就设 12px/#555。易错点：块级盒子水平居中靠 margin:auto，不是 text-align；text-align:center 是给父级影响行内内容；h4 不写 font-weight:400 会保持默认加粗。

易错点复盘 ​

为什么需要：这类卡片结构简单，错误多在细节。怎么想：先检查结构层级，再检查盒模型，最后检查文字和修饰。怎么做：图片路径要正确，img 的 src 与素材目录一致；卡片宽高固定后不要随意加会撑大的 padding/border；文字间距用 margin 微调，数值以效果为准。易错点：忘记 box-sizing 导致卡片变大；把 text-align:center 当成块级盒子居中；标题默认加粗未重置；说明文字字号、颜色与标题没有层级差异。

整体布局：先把大盒子放到页面中间 ​

新闻列表综合案例效果图

为什么需要：新闻列表不是零散地写几个标题，而是先有一个固定宽度、固定高度的“容器”，再把头部和内容装进去。没有大盒子，后面的居中、边框、背景都会失去参照。

怎么想：转写稿里反复强调“先看需求再写代码”。效果图是一个居中的新闻模块，所以先写 .news 大盒子，量出宽高，再用 margin: 100px auto; 让块级盒子水平居中。大盒子内部再分成上下两部分：头部 .hd 和内容 .bd。

怎么做：先做全局重置，去掉默认 margin、padding、box-sizing，去掉 li 小点和 a 下划线。然后写 .news：

html
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.news {
  margin: 100px auto;
  width: 360px;
  height: 200px;
  /* background-color: pink; */
}
</style>

<div class="news"></div>

易错点：.news 是块级盒子，水平居中要用 margin: auto，不是 text-align: center。调试时可先给 background-color: pink 看盒子位置，确认后再注释掉。box-sizing: border-box 要提前写，否则后面加边框、内边距容易把盒子撑大。

标题区域：用负 margin 压住父边框 ​

为什么需要：标题区域不是单纯一行文字，而是一个“新闻”选项卡：它有高度、背景、边框，并且顶部有橙色线、右侧有分隔线。转写稿里说，这部分要先把 .hd 当成一个盒子，再在里边放 a 链接。

怎么想：.hd 宽度不用写，因为 div 默认和父盒子一样宽；只需要高度、背景色和边框。左侧边框不要，是因为后面内容要盖住它，整体看起来更连贯。里面的 a 原本是行内元素，不能直接设宽高，所以必须 display: block 转成块级元素。

怎么做：

html
<style>
.news .hd {
  height: 34px;
  background-color: #eee;
  border: 1px solid #dbdee1;
  border-left: 0;
}

.news .hd a {
  /* -1 盒子向上移动 */
  margin-top: -1px;
  display: block;
  border-top: 3px solid #ff8400;
  border-right: 1px solid #dbdee1;
  width: 48px;
  height: 34px;
  background-color: #fff;

  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #333;
}
</style>

<div class="hd"><a href="#">新闻</a></div>

易错点：第一，a 不转块级，宽高不生效；第二，选择器要写 .news .hd a，不能只写 a，否则会误伤下面内容区的链接；第三，margin-top: -1px 是负值，盒子向上移动，正好压住父盒子的上边框；第四，line-height 要结合 3px 上边框微调，笔记里用 32px，转写稿调试时也提到边框会把文字往下挤，需要试到视觉居中。

内容区域：li 和 a 各自承担一张背景图 ​

为什么需要：新闻列表每一项前面通常有两个小图标：列表小方块和链接前的小图。转写稿里明确说，小方块给 li，小图给 a，这样两张图各管一层，互不干扰。

怎么想：先写结构：.bd 里放 ul，ul 里放 li，li 里放 a。li 用背景图做小方块，并用 padding-left 给文字留位置；a 再用背景图做小图，也用 padding-left 把文字往右挤，避免文字压住图片。

怎么做：

html
<style>
.news .bd {
  padding: 5px;
}

.news .bd li {
  padding-left: 15px;
  background-image: url(./images/square.png);
  background-repeat: no-repeat;
  background-position: 0 center;
}

.news .bd li a {
  padding-left: 20px;
  background: url(./images/img.gif) no-repeat 0 center;

  font-size: 12px;
  color: #666;
  line-height: 24px;
}

.news .bd li a:hover {
  color: #ff8400;
}
</style>

<div class="bd">
  <ul>
    <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
    <li><a href="#">在希望的田野上...</a></li>
    <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
    <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
    <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
    <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
  </ul>
</div>

易错点：背景图必须 no-repeat，否则会平铺；定位用 0 center，让图标靠左并垂直居中。li 和 a 的 padding-left 要分别留够，转写稿里通过测量不断调 15px、20px，最终以笔记代码为准。文字大小、颜色、行高写在 a 上，因为链接文字样式优先由 a 控制；鼠标悬停用 .news .bd li a:hover 限定范围，避免影响页面其他链接。最后可给 .bd 或列表微调上边距，让文字和头部之间更舒服，但不要为了“完全一样”反复改乱结构。

课件图示（PPTX） ​

day05 课件图

day05 课件图

day05 课件图

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品卡片</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #f1f1f1;
    }

    .product {
      margin: 50px auto;
      padding-top: 40px;
      width: 270px;
      height: 253px;
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
    }

    .product h4 {
      margin-top: 20px;
      margin-bottom: 12px;
      font-size: 18px;
      color: #333;
      font-weight: 400;
    }

    .product p {
      font-size: 12px;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="product">
    <img src="./images/liveSDK.svg" alt="">
    <h4>抖音直播SDK</h4>
    <p>包含抖音直播看播功能</p>
  </div>
</body>
</html>

关键行与易错点：

  • * { box-sizing: border-box; }：统一盒模型，避免后续加 padding、border 撑大盒子。
  • .product { margin: 50px auto; }：块级盒子水平居中用 margin: auto；text-align: center 是让内部文字和图片水平居中，两者作用不同。
  • padding-top: 40px;：用内边距把图片等内容从顶部挤下来，避免用子元素 margin-top 可能带来的外边距问题。
  • .product h4 { font-weight: 400; }：取消 h4 默认加粗。
  • 易错点：img 的 src="./images/liveSDK.svg" 需要素材文件存在，否则图片不显示。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>新闻列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./images/square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./images/img.gif) no-repeat 0 center;
      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }
  </style>
</head>
<body>
  <div class="news">
    <div class="hd"><a href="#">新闻</a></div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
        <li><a href="#">在希望的田野上...</a></li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
        <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
        <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
        <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

关键行与易错点：

  • .news { margin: 100px auto; }：大盒子水平居中；内部再分 .hd 标题区和 .bd 内容区。
  • .news .hd { border-left: 0; }：左侧不要边框；.news .hd a { display: block; } 必须写，a 默认是行内元素，不能直接设置宽高。
  • .news .hd a { margin-top: -1px; }：负外边距让链接向上压住父盒子边框线，注意负值方向是向上。
  • .news .bd li 放小方块背景图，.news .bd li a 放小图标背景图，padding-left 用来给背景图留位置。
  • 易错点：a:hover 要限定为 .news .bd li a:hover，否则页面中其他链接也可能被影响；背景图路径 ./images/square.png、./images/img.gif 需准备素材。

常见错误 ​

  1. 图片和文字没有水平居中

    • 现象：给 .product 写了 text-align: center，图片/标题仍靠左；或者反过来给块级盒子写 text-align: center 想让它自己居中，无效。
    • 原因：text-align 只作用于行内内容（文字、图片、行内块）；块级盒子自身居中要靠外边距。
    • 修法：父级 .product 加 text-align: center，靠继承让所有子内容居中；块级盒子自身用 margin: 0 auto。

  2. 想让图片下移，结果整个卡片跟着往下跑

    • 现象：给 img 加 margin-top: 40px，卡片整体位置变了，页面顶部留白变大。
    • 原因：父子元素垂直外边距合并，子元素的上外边距"传染"给了父元素。
    • 修法：给父级 .product 加 padding-top: 40px（配合 box-sizing: border-box 不会撑大盒子），用内边距把内容挤下来。

  3. 新闻头部"新闻"链接的宽高不生效

    • 现象：.hd a 写了 width: 48px; height: 34px，盒子还是只有文字那么宽。
    • 原因：a 是行内元素，宽高和上下方向的 margin 无效。
    • 修法：先 display: block，再设宽高。

  4. 标签里的文字偏下、上下不居中

    • 现象：height: 34px 配 line-height: 34px，文字看着往下沉。
    • 原因：盒子还有 3px 上边框，内容区实际只剩 31px，行高和内容区高度对不上。
    • 修法：把 line-height 调到 32px 左右做微调，或先算清边框占位再定值。

  5. 负 margin 用反，标签反而往下掉

    • 现象：想用 margin-top 压住父级那条边框线，写成正值后标签下沉，露出两条线。
    • 原因：正 margin-top 向下推，只有负值才向上拉。
    • 修法：margin-top: -1px。

  6. 列表小圆点还在 / 背景小图标铺满整行

    • 现象：li 前面仍有黑点；或 background-image 平铺成一整片。
    • 原因：li 有默认 list-style；背景图默认 repeat。
    • 修法：li { list-style: none }；background: url(...) no-repeat 0 center。

  7. 文字压在小图标上 / hover 把全站链接都改了色

    • 现象：加了背景图但文字盖住图标；写了 a:hover 后区域外的链接也跟着变色。
    • 原因：没给文字留出内边距；选择器没有限定作用范围。
    • 修法：li 加 padding-left: 15px 放小方块，a 再加 padding-left: 20px 放小图；状态样式写成 .news .bd li a:hover，把范围关在父级里。

练习 ​

  1. 闭卷复刻：合上笔记，从 * { margin:0; padding:0; box-sizing:border-box } 开始重写产品卡片，写完逐条对照 CSS 书写顺序（盒子模型属性 → 文字样式 → 圆角阴影等修饰）。

  2. 一改三：把产品卡片改成一行三张的排列（卡片间距 20px），要求父容器整体水平居中。写完后回答：为什么不能靠给每张卡片加 margin-top 来下移内部图片？

  3. 多标签改造：把新闻列表头部的"新闻"扩成"新闻 / 图片"两个标签，复用同一套 .hd a 样式，并做出默认态与选中态（选中：白底 + 橙色上边框压住父级边框线；未选中：透明底、无上边框）。

  4. 加角标：给新闻列表第三条加一个"NEW"角标，要求不破坏原有的小方块和小图标对齐位置，并说明你把角标挂在哪一层、为什么。

  5. 找错题：下面三处写法各有一个问题——a 直接设了宽高、背景图没写 no-repeat、a:hover 没带父级限定。请指出症状、原因和修改方案，并说明如果不改会分别影响页面的哪一部分。

原视频对照 ​

#视频时长
1综合案例1结束10:34
2综合案例2开始03:02
3综合案例2头部制作05:06
4综合案例2头部完成06:52
5综合案例2-身体部分开始08:19
6综合案例2身体部分结束04:10
7综合案例1结束05:43

小结 ​

  1. 结构先行：先把 HTML 骨架（大容器 → 分区 → 内容）搭完整，再动 CSS，不要边写边猜。
  2. 用 .hd / .bd 这类语义化分区命名，选择器永远从"最近的父级"写起，代码才不会被自己写乱。
  3. 居中有两条互不替代的路：块级盒子靠 margin: 0 auto，行内内容靠父级 text-align: center，混用就是无效代码。
  4. 想让子元素位移，优先用父级的 padding，其次 margin；父子 margin 会合并，这是塌陷类问题的根源。
  5. 数值靠量不靠猜：宽高、行高、内边距都用测量工具取值，宁可事后微调 1px，也不要凭感觉写整数。
  6. 行内元素（a、span）要设宽高，先转 display: block，否则写了也白写。
  7. 负 margin 是"反向微调"工具，专门处理压线、贴合这类 1px 级需求；理解坐标方向才不会用反。
  8. 状态样式要"关起门来"：hover 一律带父级限定，范围收得越紧，越不容易误伤页面其他部分。