块级元素和内联元素

块级元素 (Block-level Elements)

特点：像一个独立的"块"，会占据整行宽度

内联元素 (Inline Elements)

特点：像文本一样在行内流动，只占据内容所需的宽度

视觉示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            border: 2px solid #333;
            padding: 10px;
            margin: 10px;
        }
        div, p, h1 { background: lightblue; margin: 5px 0; }
        span, a, strong { background: lightcoral; padding: 2px; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 块级元素 -->
        <h1>这是一个h1标题（块级）</h1>
        <p>这是一个段落（块级）</p>
        <div>这是一个div（块级）</div>
        
        <!-- 内联元素 -->
        <p>这是一个包含<span>内联元素span</span>和<strong>加粗文本</strong>以及<a href="#">链接</a>的段落。</p>
    </div>
</body>
</html>

显示效果：

[ 这是一个h1标题（块级）        ] ← 占满整行
[ 这是一个段落（块级）          ] ← 占满整行  
[ 这是一个div（块级）           ] ← 占满整行
[ 这是一个包含[内联元素span]和[加粗文本]以及[链接]的段落。 ] ← 内联元素在行内流动

主要块级元素

<!-- 结构元素 -->
<header>, <footer>, <main>, <nav>, <section>, <article>, <aside>

<!-- 内容容器 -->
<div>, <h1>-<h6>, <p>, <blockquote>

<!-- 列表 -->
<ul>, <ol>, <li>

<!-- 表格 -->
<table>, <tr>

<!-- 表单 -->
<form>

<!-- 其他 -->
<hr>, <pre>

主要内联元素

<!-- 文本语义 -->
<span>, <strong>, <em>, <b>, <i>, <mark>, <small>

<!-- 链接 -->
<a>

<!-- 代码 -->
<code>, <kbd>

<!-- 图像和媒体 -->
<img>, <video>, <audio>, <canvas>

<!-- 表单元素 -->
<input>, <textarea>, <select>, <button>, <label>

<!-- 其他 -->
<br>, <sup>, <sub>

关键区别详解

1. 宽度行为

<style>
    .demo { border: 1px solid red; margin: 5px; }
</style>

<!-- 块级元素：默认宽度100% -->
<div class="demo">块级div - 占满整行</div>

<!-- 内联元素：宽度由内容决定 -->
<span class="demo">内联span - 宽度自适应</span>
<span class="demo">另一个span</span>

2. 盒模型属性

<style>
    .box { background: yellow; }
    .block { margin: 20px; padding: 20px; }     /* 完全支持 */
    .inline { margin: 20px; padding: 20px; }    /* 左右有效，上下可能无效 */
</style>

<div class="box block">块级元素 - 所有边距和内边距都有效</div>
<span class="box inline">内联元素 - 上下边距可能不影响布局</span>

3. 嵌套规则

<!-- ✅ 正确：块级可以包含内联和其他块级 -->
<div>
    <p>这是一个段落</p>
    <span>这是一个span</span>
</div>

<!-- ✅ 正确：内联可以包含其他内联 -->
<p>这是一个包含<strong>加粗</strong>和<em>斜体</em>的段落</p>

<!-- ❌ 错误：内联不能直接包含块级 -->
<a href="#">
    <div>错误！内联元素包含块级元素</div>
</a>

CSS 显示属性控制

使用 display 属性改变行为

<style>
    .inline-block {
        display: inline-block;  /* 像内联一样排列，但具有块级特性 */
        width: 100px;
        height: 50px;
        margin: 10px;
        padding: 10px;
        background: lightgreen;
    }
    
    .block-to-inline {
        display: inline;        /* 将块级变为内联 */
        background: lightblue;
    }
</style>

<!-- 内联块元素 -->
<span class="inline-block">内联块1</span>
<span class="inline-block">内联块2</span>
<span class="inline-block">内联块3</span>

<!-- 块级变为内联 -->
<div class="block-to-inline">变成内联的div</div>
<div class="block-to-inline">另一个变成内联的div</div>