DailyChallenge_WebDepartment/Day_4

Day_4 · CSS 盒模型：每个元素都是一个"盒子"

预计耗时：20~30 分钟 布局最核心的概念：每个元素都是个盒子，由内容、内边距、边框、外边距四层组成。

今日知识点

• 四层（由内到外）：content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）
• 常用：margin、padding、border: 1px solid 颜色、border-radius（圆角）

先学（教程）

• 菜鸟教程 CSS（看"CSS 盒子模型"）：https://www.runoob.com/css/css-boxmodel.html
• MDN·盒模型：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
• B站视频（黑马程序员，看讲"盒子模型、padding/border/margin"的几集，选看）：https://www.bilibili.com/video/BV14J4114768/

任务（后做）

新建 box.html：

1. 写两个 div（class 为 box1、box2），各放一句话
2. 给 .box1 设 width: 200px、padding: 20px、border: 5px solid black、margin: 30px
3. 用 F12 看看它的总宽度是多少（200 + 20×2 + 5×2 = 250）
4. 给 .box2 加 border-radius: 10px 圆角和背景色

完成标准

• 能说清楚 padding / border / margin 各自作用
• 能算出盒子总宽度 250
• 圆角效果正常

提交方式：把 box.html 代码 + 你算出的总宽度，贴在当日工单评论里。

参考解答（先做再看）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
      .box1 {
        width: 200px;
        padding: 20px;
        border: 5px solid black;
        margin: 30px;
        background-color: lightblue;
      }
      .box2 {
        width: 200px;
        padding: 20px;
        border: 5px solid black;
        margin: 30px;
        background-color: lightcoral;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box1">盒子 1</div>
    <div class="box2">盒子 2（圆角）</div>
  </body>
</html>