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

前面学的 h1~h6、p、ul、table、form、input、a 这些标签浏览器会默认把它们分成三类块级元素block独占一整行上下换行。代表div、p、h1‑h6、ul、ol、form行内元素inline不换行多个标签从左到右并排不能设置宽高。代表span、a、b、i行内块元素inline‑block并排显示同时可以设置宽高。代表img、input两个最重要容器标签div块级容器用来划分大区域网页布局主力盒子span行内容器用来给一小段文字局部改样式核心记忆块级占整行行内并排不能设宽高行内块并排还能设宽高。一、块级元素 block特点独占一整行后面的内容自动换行。可以设置width宽度、height高度、margin 外边距、padding 内边距。里面可以放块级、行内、行内块元素。特殊p 标签里面不能放块级标签p 里面不要套 div、h1。常见块级标签div、h1~h6、p、ul、ol、li、table、form、dl示例观察效果!DOCTYPE html html langzh‑CN head meta charsetUTF‑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 classheader h2网站标题/h2 /div !-- 中间主体内容 -- div classmain p这里是网页主要内容文字/p /div !-- 网页底部 -- div classfooter p版权所有 ©2026/p /div /bodydiv 就是一个透明大盒子把一组相关标签包裹在一起方便统一加 CSS 样式。class 属性给 div 起类名CSS 通过 class 选中这个盒子设置样式。二、行内元素 inline特点不会独占一行多个标签从左往右并排显示。不能设置 width、height宽高由里面的文字内容撑开。只能存放文字、其他行内元素行内里面尽量不放块级元素。常见行内标签span、a超链接、b加粗、i斜体、strong、emspan 行内容器span 没有默认样式专门用来选中一小段文字局部改样式。div 管一大块区域span 管一小段文字。示例p今天天气很好span stylecolor: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特点和行内一样多个元素横向并排显示不强制换行和块级一样可以设置 width、height、margin、padding典型标签img图片、input输入框示例img 并排body img srchttps://picsum.photos/id/10/100/80 alt图1 img srchttps://picsum.photos/id/11/100/80 alt图2 img srchttps://picsum.photos/id/12/100/80 alt图3 /body三张图片并排同时可以设置 width 宽高。input 输入框也是行内块input typetext input typebutton value按钮输入框和按钮横向排在一起还能设置宽高。✨CSS 改变元素显示模式重点我们可以用displayCSS 属性强行切换三种模式。display:block;→ 变成块级独占一行可以设置宽高display:inline;→ 变成行内并排不能设置宽高display:inline‑block;→ 变成行内块并排 可设置宽高示例 1把 a 链接原本行内改成块级!DOCTYPE html html langzh‑CN head meta charsetUTF‑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 charsetUTF‑8 style .box{ width:100px; height:100px; background:#ffa500; display:inline‑block; /*块级div改为行内块盒子横向排*/ } /style /head body div classbox盒子1/div div classbox盒子2/div div classbox盒子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 stylebackground:#ccc; 这是一大块内容会占满整行 /div p春天来了span stylecolor:green;万物复苏/span花儿开放。/p !-- span只修饰句子中间一小段文字 --新手高频踩坑坑 1给行内元素span、a设置 width height发现完全不起效果解决加上display:inline‑block;或者display:block;坑 2p 标签里面嵌套 div❌p div错误p里面不能放div块级标签/div /p浏览器会自动把 p 标签拆分代码错乱。坑 3分不清什么时候用 div 什么时候 span要包裹一大块包含标题、段落、图片→ 用 div 只想修改一句话里面几个字的颜色 → 用 span坑 4想让多个 div 横向排忘记写display:inline‑blockdiv 默认块级每个占一行想要并排设置display:inline‑block。完整综合示例直接复制运行!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 meta nameviewport contentwidthdevice‑width, initial‑scale1.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 classbig‑box 我是div块级元素独占一行。 /div div classbig‑box 多个小div设置inline‑block实现并排 div classsmall1/div div classsmall2/div div classsmall3/div /div p 这是p段落块级。span stylecolor:blue;font‑size:18px;这里一小段文字使用span行内标签改成蓝色/span后面继续文字。 /p p图片img是行内块可以并排可设置宽高/p img srchttps://picsum.photos/id/20/80/60 alt图 img srchttps://picsum.photos/id/21/80/60 alt图 /body /html本篇知识点总结HTML 元素分为三类块级 block、行内 inline、行内块 inline‑block。块级元素独占一行可以设置宽高div是通用块容器用来划分网页大块布局。行内元素横向并排宽高由内容决定设置宽高无效span行内容器用于局部文字样式。行内块元素既可以并排又支持宽高代表标签img、input。CSS 的display属性可以修改元素显示模式block /inline/inline‑block。div 做大盒子span 修饰小段文字p 不要嵌套 div。✍小练习使用 div 做 2 个大盒子大盒子内部放 3 个小 div设置display:inline‑block横向并排写一段 p中间用 span 把其中几个字改成红色。