HTML区块元素[编辑 | 编辑源代码]

HTML区块元素（Block-level Elements）是构成网页布局的基础结构单元，这些元素在页面中以独立区块的形式存在，默认情况下会占据父容器的整个水平空间，并在垂直方向堆叠排列。与内联元素不同，区块元素通常用于构建网页的主要结构框架。

核心特性[编辑 | 编辑源代码]

区块元素具有以下关键特征：

自动换行：前后默认带有换行符
尺寸可控：可通过CSS设置明确的width/height
包含关系：可包含其他区块元素或内联元素
边距控制：默认带有margin（某些元素如<p>具有默认上下边距）

标准区块元素示例[编辑 | 编辑源代码]

元素标签	语义用途
`<div>`	通用内容容器
`<section>`	文档主题分区
`<article>`	独立内容区块
`<header>`	页眉/章节头部
`<footer>`	页脚/章节尾部
`<nav>`	导航链接区
`<h1>-<h6>`	标题层级

基础代码示例[编辑 | 编辑源代码]

以下示例展示典型区块元素的结构关系：

<!DOCTYPE html>
<html>
<head>
    <title>布局示例</title>
    <style>
        body { font-family: Arial; margin: 0; }
        header { background: #333; color: white; padding: 1rem; }
        nav { background: #444; padding: 0.5rem; }
        main { display: flex; min-height: 300px; }
        article { flex: 3; padding: 1rem; }
        aside { flex: 1; background: #f4f4f4; padding: 1rem; }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <a href="#">首页</a> | <a href="#">产品</a>
    </nav>
    <main>
        <article>
            <h2>主内容区</h2>
            <p>这是文章的主要内容...</p>
        </article>
        <aside>
            <h3>侧边栏</h3>
            <p>附加信息内容</p>
        </aside>
    </main>
    <footer>
        <p>© 2023 公司名称</p>
    </footer>
</body>
</html>

模板:Output

布局行为详解[编辑 | 编辑源代码]

盒子模型[编辑 | 编辑源代码]

每个区块元素都遵循CSS盒子模型：

数学表达： 解析失败 (语法错误): {\displaystyle 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right}

堆叠规则[编辑 | 编辑源代码]

区块元素默认按照文档流垂直排列：

实际应用案例[编辑 | 编辑源代码]

响应式布局[编辑 | 编辑源代码]

结合CSS媒体查询创建自适应布局：

<div class="container">
    <div class="row">
        <div class="col">左栏</div>
        <div class="col">中栏</div>
        <div class="col">右栏</div>
    </div>
</div>

<style>
    .row { display: flex; flex-wrap: wrap; }
    .col { flex: 1; min-width: 200px; padding: 1rem; }
    @media (max-width: 600px) {
        .col { flex: 100%; }
    }
</style>

卡片式布局[编辑 | 编辑源代码]

现代网页常用的卡片组件实现：

<article class="card">
    <header>
        <h2>产品名称</h2>
    </header>
    <div class="card-body">
        <img src="product.jpg" alt="产品图片">
        <p>产品描述文字...</p>
    </div>
    <footer>
        <button>加入购物车</button>
    </footer>
</article>

<style>
    .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 300px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .card-body { padding: 15px; }
    .card footer { 
        background: #f5f5f5;
        padding: 10px;
        text-align: center;
    }
</style>

高级主题[编辑 | 编辑源代码]

语义化布局[编辑 | 编辑源代码]

HTML5引入的语义元素比传统

更能表达结构含义：

<body>
    <header>...</header>
    <nav>...</nav>
    <main>
        <article>
            <section>...</section>
            <section>...</section>
        </article>
        <aside>...</aside>
    </main>
    <footer>...</footer>
</body>

布局模式转换[编辑 | 编辑源代码]

通过CSS display属性可以改变元素的默认布局行为：

/* 将区块元素转为内联块 */
div.inline-block {
    display: inline-block;
    width: 200px;
}

/* 创建弹性容器 */
section.flex-container {
    display: flex;
    gap: 20px;
}

/* 创建网格布局 */
div.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

最佳实践[编辑 | 编辑源代码]

优先使用语义化元素（<article>、<section>等）
避免深层嵌套（一般不超过4-5层）
结合CSS Grid/Flexbox进行现代布局
为关键区块添加ARIA地标角色（如role="main"）

页面模块:Message box/ambox.css没有内容。