盒模型与布局 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 6 关

进度 0%

第 6 关：盒模型与布局

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 6 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

盒模型与布局
CSS 盒模型是每个元素的基础

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# 盒模型与布局
# CSS 盒模型是每个元素的基础

def demo_box_model():
    print("=== CSS 盒模型 ===\n")
    print("┌──────────── Margin（外边距）────────────┐")
    print("│ ┌────────── Border（边框）──────────┐  │")
    print("│ │ ┌──────── Padding（内边距）───────┐│  │")
    print("│ │ │                                 ││  │")
    print("│ │ │        Content（内容）           ││  │")
    print("│ │ │        width × height            ││  │")
    print("│ │ │                                 ││  │")
    print("│ │ └─────────────────────────────────┘│  │")
    print("│ └────────────────────────────────────┘  │")
    print("└─────────────────────────────────────────┘")

demo_box_model()

# 盒模型 CSS 示例
css = """
/* 标准盒模型 */
.box-standard {
    width: 200px;          /* 内容宽度 */
    padding: 20px;         /* 内边距 */
    border: 2px solid #333;/* 边框 */
    margin: 10px;          /* 外边距 */
    /* 实际占用宽度 = 200 + 20*2 + 2*2 + 10*2 = 264px */
}

/* border-box 盒模型（推荐） */
.box-border {
    box-sizing: border-box;
    width: 200px;          /* 总宽度（包含 padding 和 border） */
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    /* 实际占用宽度 = 200 + 10*2 = 220px */
}

/* 居中布局 */
.center-box {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;        /* 水平居中 */
    padding: 20px;
}
"""
print("\n" + css)

# 常见布局模式
print("--- 常见布局 ---")
layouts = [
    "margin: 0 auto  → 水平居中",
    "display: flex   → 弹性布局",
    "display: grid   → 网格布局",
    "position: fixed → 固定定位",
    "float: left     → 浮动（旧式）"
]
for l in layouts:
    print(f"  {l}")

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 6 关：盒模型与布局

HTML/CSS · 入门 · 《HTML & CSS 基础》

盒模型与布局
CSS 盒模型是每个元素的基础

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。