大皓皓非常然头像
关注
HTML系列教程：25_HTML 区块元素（块级、行内、行内块，div、span）零基础详解封面图

HTML系列教程：25_HTML 区块元素（块级、行内、行内块，div、span）零基础详解

前面学的 h1~h6、p、ul、table、form、input、a 这些标签，浏览器会默认把它们分成三类：

  1. 块级元素（block）：独占一整行，上下换行。代表：div、p、h1‑h6、ul、ol、form
  2. 行内元素（inline）：不换行，多个标签从左到右并排；不能设置宽高。代表：span、a、<b>、<i>
  3. 行内块元素（inline‑block）：并排显示，同时可以设置宽高。代表：img、input

两个最重要容器标签：

  • <div>：块级容器，用来划分大区域，网页布局主力（盒子）
  • <span>：行内容器，用来给一小段文字局部改样式

核心记忆：块级占整行；行内并排不能设宽高；行内块并排还能设宽高。

一、块级元素 block

特点

  1. 独占一整行，后面的内容自动换行。
  2. 可以设置 width 宽度、height 高度、margin 外边距、padding 内边距。
  3. 里面可以放块级、行内、行内块元素。

特殊：p 标签里面不能放块级标签（p 里面不要套 div、h1）。

常见块级标签： div、h1~h6、p、ul、ol、li、table、form、dl

示例观察效果

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
    <meta charset="UTF‑8">
    <style>
        div{
            background:#87ceeb;
        }
        h3{
            background:#ffd700;
        }
        p{
            background:#90ee90;
        }
    </style>
</head>
<body>
    <div>我是div块级元素1</div>
    <h3>我是h3标题块级元素</h3>
    <p>我是p段落块级元素</p>
</body>
</html>

效果： 每个盒子各自占满一整行，一个结束，下一个跑到下面新一行。

div 通用块容器（布局最重要标签）

div本身没有任何默认样式，纯粹用来划分网页的一块块区域。 网页结构：头部、导航、内容区、侧边栏、底部，全部用 div 划分。

示例，用 div 划分页面模块：

<body>
    <!-- 网页头部区域 -->
    <div class="header">
        <h2>网站标题</h2>
    </div>

    <!-- 中间主体内容 -->
    <div class="main">
        <p>这里是网页主要内容文字</p>
    </div>

    <!-- 网页底部 -->
    <div class="footer">
        <p>版权所有 ©2026</p>
    </div>
</body>

div 就是一个透明大盒子，把一组相关标签包裹在一起，方便统一加 CSS 样式。

class 属性：给 div 起类名，CSS 通过 class 选中这个盒子设置样式。

二、行内元素 inline

特点

  1. 不会独占一行，多个标签从左往右并排显示。
  2. 不能设置 width、height，宽高由里面的文字内容撑开。
  3. 只能存放文字、其他行内元素；行内里面尽量不放块级元素。

常见行内标签： span、<a>超链接、<b>加粗、<i>斜体、<strong>、<em>

span 行内容器

span 没有默认样式，专门用来选中一小段文字，局部改样式。

div 管一大块区域；span 管一小段文字。

示例：

<p>今天天气很好，<span style="color:red;font‑weight:bold;">适合出门游玩</span>。</p>

解释： 整段是 p（块级），里面 “适合出门游玩” 这一小部分，用 span 包起来，单独改成红色加粗。

行内元素并排演示

<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <span>文字A</span>
    <span>文字B</span>
</body>

效果：全部横向排在一起，不会换行。

❗行内元素坑：给 span、a 设置 width、height，不生效！

span{
    width:200px;
    height:100px;
    background:pink;
}

写了宽高，浏览器完全忽略，因为 inline 行内不支持宽高。

三、行内块元素 inline‑block

特点

  1. 和行内一样：多个元素横向并排显示，不强制换行
  2. 和块级一样：可以设置 width、height、margin、padding

典型标签： <img>图片、<input>输入框

示例：img 并排

<body>
    <img src="https://picsum.photos/id/10/100/80" alt="图1">
    <img src="https://picsum.photos/id/11/100/80" alt="图2">
    <img src="https://picsum.photos/id/12/100/80" alt="图3">
</body>

三张图片并排，同时可以设置 width 宽高。

input 输入框也是行内块：

<input type="text">
<input type="button" value="按钮">

输入框和按钮横向排在一起，还能设置宽高。

✨CSS 改变元素显示模式（重点！）

我们可以用 display CSS 属性，强行切换三种模式。

  • display:block; → 变成块级，独占一行，可以设置宽高
  • display:inline; → 变成行内，并排，不能设置宽高
  • display:inline‑block; → 变成行内块，并排 + 可设置宽高

示例 1：把 a 链接（原本行内）改成块级

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
    <meta charset="UTF‑8">
    <style>
        a{
            display:block; /*把行内a改为块级，独占一行，可以设置宽高*/
            width:120px;
            height:40px;
            background:#4285f4;
            color:white;
            text‑decoration:none;
            text‑align:center;
            line‑height:40px;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
</body>
</html>

效果：链接不再并排，每个链接占一整行，变成方块按钮。

示例 2：把 div（块级）改成行内块，实现多个盒子横向并排

<head>
<meta charset="UTF‑8">
<style>
    .box{
        width:100px;
        height:100px;
        background:#ffa500;
        display:inline‑block; /*块级div改为行内块，盒子横向排*/
    }
</style>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>
</body>

原本 div 每个占一行；设置display:inline‑block之后三个盒子横向并排。

三类元素对比表格

类型display 值换行特点能否设置宽高典型标签使用场景
块级元素block独占一行，自动换行✅可以div、p、h1‑h6、ul划分网页大区域、大盒子布局
行内元素inline横向并排，不换行❌无效span、a、b、em一小段文字局部样式
行内块元素inline‑block横向并排，不换行✅可以img、input图片、表单控件；小盒子并排

通俗大白话记忆

  • 块级：大盒子，一人占一行，能做大做宽
  • 行内：文字碎片，挤在一起，不能改大小
  • 行内块：像文字一样排，又能设置宽高

div 和 span 的核心区别（新手必背）

标签类型作用
<div>块级 block划分网页大块区域，大盒子，独占一行
<span>行内 inline选中一小段文字，局部改颜色字体，不会换行

示例对比：

<!-- div：一大块 -->
<div style="background:#ccc;">
    这是一大块内容，会占满整行
</div>

<p>春天来了，<span style="color:green;">万物复苏</span>，花儿开放。</p>
<!-- span只修饰句子中间一小段文字 -->

新手高频踩坑

坑 1：给行内元素（span、a）设置 width height，发现完全不起效果

解决：加上 display:inline‑block; 或者 display:block;

坑 2：p 标签里面嵌套 div

❌

<p>
    <div>错误，p里面不能放div块级标签</div>
</p>

浏览器会自动把 p 标签拆分，代码错乱。

坑 3：分不清什么时候用 div 什么时候 span

要包裹一大块（包含标题、段落、图片）→ 用 div 只想修改一句话里面几个字的颜色 → 用 span

坑 4：想让多个 div 横向排，忘记写display:inline‑block

div 默认块级，每个占一行；想要并排，设置display:inline‑block。

完整综合示例，直接复制运行

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
    <meta charset="UTF‑8">
    <meta name="viewport" content="width=device‑width, initial‑scale=1.0">
    <style>
        /*块级盒子div*/
        .big‑box{
            background:#b0e0e6;
            margin:8px 0;
            padding:10px;
        }
        /*行内块，让小div横向并排*/
        .small{
            width:80px;
            height:80px;
            background:#ffb6c1;
            display:inline‑block;
            margin:5px;
        }
    </style>
</head>
<body>
    <h2>区块元素演示</h2>

    <div class="big‑box">
        我是div块级元素，独占一行。
    </div>

    <div class="big‑box">
        多个小div设置inline‑block实现并排：
        <div class="small">1</div>
        <div class="small">2</div>
        <div class="small">3</div>
    </div>

    <p>
        这是p段落块级。<span style="color:blue;font‑size:18px;">这里一小段文字使用span行内标签改成蓝色</span>，后面继续文字。
    </p>

    <p>图片img是行内块，可以并排，可设置宽高：</p>
    <img src="https://picsum.photos/id/20/80/60" alt="图">
    <img src="https://picsum.photos/id/21/80/60" alt="图">

</body>
</html>

本篇知识点总结

  1. HTML 元素分为三类：块级 block、行内 inline、行内块 inline‑block。
  2. 块级元素独占一行，可以设置宽高；div是通用块容器，用来划分网页大块布局。
  3. 行内元素横向并排，宽高由内容决定，设置宽高无效；span行内容器，用于局部文字样式。
  4. 行内块元素既可以并排，又支持宽高；代表标签 img、input。
  5. CSS 的display属性可以修改元素显示模式：block /inline/inline‑block。
  6. div 做大盒子；span 修饰小段文字；p 不要嵌套 div。

✍小练习：

  1. 使用 div 做 2 个大盒子；
  2. 大盒子内部放 3 个小 div，设置display:inline‑block横向并排；
  3. 写一段 p，中间用 span 把其中几个字改成红色。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/zhanghaha1314/article/details/163603191

文章来源转载

评论

赞0

评论列表

微信小程序
QQ小程序

关于作者

点赞数：0
关注数：0
粉丝：0
文章：0
关注标签：0
加入于：--