HTML的布局—— DIV 与 SPAN
一、DIV 核心知识
1.1 DIV 的定义与基本语法
1.1.1 核心概念
- 定义：
<div>（全称 Division/Section）是 HTML 中的块级元素，默认前后自动换行，用于划分网页中的独立分区（如头部、主体、侧边栏），是DIV+CSS布局的核心载体。 - 核心作用：作为容器包裹其他元素（文本、图片、表单、甚至其他
div），通过 CSS 控制其位置、尺寸、样式，实现网页结构化布局。
1.1.2 基本语法
<div id="唯一标识" <!-- 单个元素的唯一ID，用于CSS/JS精准选择 -->class="样式类名" <!-- 多个元素共享的样式类，可重复使用 -->style="CSS内联样式" <!-- 直接写在元素上的样式，优先级最高 -->
>分区内容（文本、图片、其他元素等）
</div>示例（带定位与样式的 div）：
<div id="header" class="page-section" style="position:relative; width:100%; height:80px; background:#f5f5f5; border-bottom:1px solid #ccc;"
>网站头部（包含Logo、导航）
</div>1.2 DIV 的 CSS 定位与布局属性
div的核心价值依赖 CSS 定位属性实现灵活布局，关键属性包括定位方式、尺寸、层叠、浮动等，是控制元素位置的核心。
1.2.1 核心定位属性（position）
position决定元素的定位机制，直接影响元素在页面中的位置计算方式，是布局的 “基石”。
| 属性值 | 说明 | 参照物 | 是否脱离文档流 |
|---|---|---|---|
static | 默认值，无特殊定位，元素遵循 “普通流”（按 HTML 代码顺序排布） | 无（按正常顺序） | 否 |
relative | 相对定位，相对于元素自身正常位置偏移（不脱离文档流，保留原位置） | 自身正常位置 | 否 |
absolute | 绝对定位，相对于第一个非 static 定位的父元素偏移（完全脱离文档流） | 非 static 的父元素（无则为浏览器窗口） | 是 |
fixed | 固定定位，相对于浏览器窗口定位（完全脱离文档流，不随滚动条滚动） | 浏览器窗口 | 是 |
inherit | 继承父元素的position属性值 | 与父元素一致 | 随父元素 |
关键说明：
- 仅当
position为absolute/fixed/relative时，top/right/bottom/left（坐标属性）才生效； static定位下，坐标属性、z-index均无效。
1.2.2 坐标属性（控制位置偏移）
配合position使用，精准控制元素的偏移量，单位通常为px（像素）、%（相对于参照物尺寸）。
| 属性 | 说明 |
|---|---|
top | 定位元素顶边到参照物顶部内壁的距离（值越大越靠下） |
left | 定位元素左边到参照物左侧内壁的距离（值越大越靠右） |
right | 定位元素右边到参照物右侧内壁的距离（值越大越靠左） |
bottom | 定位元素底边到参照物底部内壁的距离（值越大越靠上） |
示例：相对定位元素向右偏移 20px、向下偏移 10px
<div style="position:relative; left:20px; top:10px; width:200px; height:100px; background:red;">相对自身偏移
</div>1.2.3 层叠属性（z-index）
控制多个定位元素的叠加顺序，解决 “谁在上面” 的问题，仅对position为absolute/fixed/relative的元素生效。
- 取值：整数（正 / 负 / 0），默认值为
auto（继承父元素层叠顺序）； - 规则：
- 数值越大，元素层叠顺序越靠上（如
z-index:2的元素会覆盖z-index:1的元素）； - 子元素的层叠顺序永远高于父元素（即使父元素
z-index更小，子元素也不会被父元素覆盖）； - 若两个元素
z-index相同，后定义的元素会覆盖先定义的元素。
- 数值越大，元素层叠顺序越靠上（如
示例（三层叠加）：
<div style="position:absolute; top:0; left:0; width:200px; height:200px; background:black; z-index:0; color:white;">div1（最下层）</div>
<div style="position:absolute; top:25px; left:50px; width:200px; height:200px; background:red; z-index:1;">div2（中间层）</div>
<div style="position:absolute; top:50px; left:100px; width:200px; height:200px; background:yellow; z-index:2;">div3（最上层）</div>1.2.4 浮动与清除浮动（float/clear）
float是早期实现多列布局（如左栏 + 右栏、三栏）的核心属性，用于让元素 “脱离普通流” 并向左右浮动，其他元素会环绕它。
1. float属性
| 属性值 | 说明 |
|---|---|
left | 元素向左浮动，右侧空间可被其他元素占据 |
right | 元素向右浮动，左侧空间可被其他元素占据 |
none | 默认值，元素不浮动，遵循普通流 |
inherit | 继承父元素的float属性值 |
浮动元素特性：
- 浮动元素会自动转为块级元素（相当于隐含
display:block），但不会独占一行； - 浮动元素会 “脱离普通流”，但未脱离 “文档流”，其他文本 / 行内元素会环绕它；
- 父元素若未设置高度，且子元素全部浮动，会导致父元素高度塌陷（父元素无法被子元素撑开）。
2. clear属性（清除浮动影响）
用于解决浮动元素导致的布局混乱（如父元素高度塌陷、后续元素被浮动元素覆盖），定义 “元素的哪一侧不允许有浮动元素”。
| 属性值 | 说明 |
|---|---|
left | 元素左侧不允许有浮动元素（元素会位于左侧浮动元素的下方） |
right | 元素右侧不允许有浮动元素（元素会位于右侧浮动元素的下方） |
both | 元素左右两侧均不允许有浮动元素（最常用，彻底清除浮动影响） |
none | 默认值，允许浮动元素出现在两侧 |
inherit | 继承父元素的clear属性值 |
常用清除浮动方案：
- 方案 1：在浮动元素后添加空
div，设置clear:both（简单但冗余）：<div style="float:left; width:50%;">左栏</div> <div style="float:right; width:50%;">右栏</div> <div style="clear:both;"></div> <!-- 清除浮动，父元素高度恢复 --> - 方案 2：给父元素添加 “清除浮动伪元素”（推荐，无冗余代码）：
使用时给父元素加.clearfix::after {content: ""; /* 伪元素必须有content */display: block; /* 转为块级元素 */clear: both; /* 清除左右浮动 */visibility: hidden; /* 隐藏伪元素 */height: 0; /* 伪元素高度为0 */ }class="clearfix"即可：<div class="clearfix"> <!-- 父元素 --><div style="float:left; width:50%;">左栏</div><div style="float:right; width:50%;">右栏</div> </div>
1.3 DIV 的应用：id与class的区别
id和class均用于关联 CSS 样式或 JavaScript 操作，但适用场景完全不同，是DIV+CSS开发的基础规范。
| 对比维度 | id属性 | class属性 |
|---|---|---|
| 唯一性 | 页面中唯一，一个元素只能有一个id | 可重复，多个元素可共享一个class |
| 用途 | 选择单个元素（如页面唯一的头部#header） | 选择一组元素（如所有按钮.btn） |
| CSS 引用方式 | 用#引用（如#header { ... }） | 用.引用（如.page-section { ... }） |
| JavaScript 引用 | document.getElementById("id") | document.getElementsByClassName("class") |
示例：
/* id选择器：仅作用于id="header"的元素 */
#header { height: 80px; background: #333; }
/* class选择器：作用于所有class="box"的元素 */
.box { width: 200px; height: 150px; border: 1px solid #ccc; margin: 10px; }
<div id="header" class="page-section">网站头部</div>
<div class="box">内容块1</div>
<div class="box">内容块2</div>2.4 DIV 嵌套与层叠
2.4.1 嵌套定义
- 概念：一个
div（父层）内部包含其他div（子层），形成层级结构，用于实现复杂布局（如 “头部包含 Logo 和导航”“主体包含左栏、中栏、右栏”）。 - 语法规则：子
div必须完全包裹在父div内部，父层样式会影响子层（如父层设置width:1200px，子层宽度默认不超过父层）。
示例（头部嵌套结构）：
<div id="header" style="width:100%; height:80px; background:#f5f5f5;"><!-- 子层1：Logo --><div id="logo" style="float:left; width:200px; height:80px;"><img src="logo.png" alt="网站Logo"></div><!-- 子层2：导航 --><div id="nav" style="float:right; width:600px; height:80px;"><a href="#">首页</a><a href="#">关于我们</a><a href="#">产品展示</a></div>
</div>1.4.2 嵌套层叠规则
- 子层的
z-index仅在父层内部生效，子层永远在父层之上（即使父层z-index小于其他外部元素，子层也不会被外部元素覆盖）； - 若父层未设置
position（默认static），子层若为absolute定位，会以浏览器窗口为参照物；若父层设置position:relative/absolute/fixed，子层会以父层为参照物。
示例（子层相对父层定位）：
<!-- 父层：relative定位，作为子层的参照物 -->
<div style="position:relative; width:300px; height:300px; background:blue;"><!-- 子层：absolute定位，相对于父层偏移 --><div style="position:absolute; top:50px; left:50px; width:200px; height:200px; background:yellow;">子层（相对于父层定位）</div>
</div>二、元素类型：块级、行内、行内块
div和span的核心差异源于 “元素类型”，HTML 元素按显示特性分为块级元素、行内元素、行内块元素，三者的布局行为完全不同。
2.1 三大元素类型对比
| 特性维度 | 块级元素（Block） | 行内元素（Inline） | 行内块元素（Inline-Block） |
|---|---|---|---|
| 代表元素 | div、h1-h6、p、ul、table | span、a、label、em、strong | input、img、button |
| 换行特性 | 独占一行，前后自动换行 | 不独占一行，与其他行内元素同行显示 | 不独占一行，与其他元素同行显示 |
| 宽高设置 | 支持width/height（默认继承父层宽度） | 不支持，宽高由内容决定 | 支持width/height |
margin属性 | 四个方向均生效（上 / 下 / 左 / 右） | 仅左 / 右生效，上 / 下无效 | 四个方向均生效 |
padding属性 | 四个方向均生效，影响布局 | 四个方向均生效，但上 / 下不影响其他元素 | 四个方向均生效，影响布局 |
| 嵌套规则 | 可嵌套任意元素（块级、行内、行内块） | 仅可嵌套行内元素 / 文本，不可嵌套块级元素 | 同块级元素（可嵌套任意元素） |
| 代码空格影响 | 无（独占一行，空格不影响布局） | 代码有空格 / 空行，浏览器显示时会有间隙 | 代码有空格 / 空行，浏览器显示时会有间隙 |
直观示例：
<!-- 块级元素：div独占一行 -->
<div style="background:red; width:100px; height:50px;">块级元素</div>
<p style="background:green;">另一个块级元素（p标签）</p><!-- 行内元素：span与a同行，不支持宽高 -->
<span style="background:yellow; width:200px; height:50px;">行内元素1</span>
<a href="#" style="background:orange;">行内元素2（a标签）</a><!-- 行内块元素：input与img同行，支持宽高 -->
<input type="text" style="width:200px; height:30px;">
<img src="icon.png" style="width:30px; height:30px;" alt="图标">2.2 元素类型转换（display属性）
通过 CSS 的display属性可强制转换元素类型，打破默认限制（如将div转为行内元素，或span转为块级元素）。
display取值 | 转换结果 | 说明 |
|---|---|---|
block | 转为块级元素 | 元素独占一行，支持宽高、margin/padding 四个方向生效 |
inline | 转为行内元素 | 元素不独占一行，不支持宽高，margin 上 / 下无效 |
inline-block | 转为行内块元素 | 元素不独占一行，支持宽高、margin/padding 四个方向生效 |
none | 隐藏元素 | 元素从页面中消失，不占据任何空间（与visibility:hidden的区别：后者隐藏但占位置） |
inherit | 继承父元素的display值 | 子元素沿用父元素的显示类型 |
常用转换场景：
- 将
span转为块级元素，实现独占一行：span { display: block; width: 200px; height: 50px; background:yellow; } - 将
div转为行内块元素，实现多列同行：.box { display: inline-block; width: 200px; height: 150px; margin: 10px; } - 隐藏元素（如点击按钮隐藏弹窗）：
#popup { display: none; } /* 隐藏弹窗，不占位置 */
三、SPAN 核心知识
3.1 SPAN 的定义与语法
- 定义：
<span>是 HTML 中的行内元素，默认不换行，仅包裹行内文本或小范围内容（如单个词语、图标），用于局部样式修改（如高亮关键词、改变字体颜色）。 - 核心作用：不改变页面布局，仅对包裹的内容应用样式，是 “行内内容的容器”。
3.1.2 基本语法
<span id="唯一标识" <!-- 极少用，因span通常用于小范围内容，多复用class -->class="样式类名" <!-- 常用，批量应用样式 -->style="CSS内联样式" <!-- 局部样式，如修改单个词语颜色 -->
>行内内容（如文本、小图标）
</span>示例（高亮关键词）：
<p>HTML是<span style="color:red; font-weight:bold;">超文本标记语言</span>，是构建网页的基础。</p>
<p>今日气温：<span class="high-temp">28℃</span>（较昨日升高2℃）</p>3.2 SPAN 的应用场景
- 局部文本样式修改：如高亮关键词、改变字体大小 / 颜色、添加下划线等；
- 行内元素分组：将多个行内元素（如图标 + 文本）包裹，统一控制间距或对齐；
- 配合 JavaScript 操作：如动态修改行内文本内容（如倒计时数字）。
示例（行内元素分组）：
<!-- 图标+文本分组，统一控制间距 -->
<span class="icon-text"><img src="phone-icon.png" style="width:16px; height:16px;"><span>0512-65787572</span>
</span>
.icon-text { margin-right: 20px; vertical-align: middle; } /* 垂直居中对齐 */四、DIV 与 SPAN 的核心区别
| 对比维度 | DIV | SPAN |
|---|---|---|
| 元素类型 | 块级元素（默认display:block） | 行内元素（默认display:inline） |
| 换行特性 | 独占一行，前后自动换行 | 不独占一行，与其他行内元素同行显示 |
| 宽高支持 | 支持width/height设置 | 不支持，宽高由内容决定 |
| 嵌套规则 | 可嵌套任意元素（包括 div、span） | 仅可嵌套行内元素 / 文本，不可嵌套 div |
| 主要用途 | 网页分区布局（头部、主体、侧边栏） | 行内内容局部样式修改（高亮、变色） |
| 布局影响 | 影响整体页面结构 | 不影响布局，仅作用于局部内容 |
关键总结：“大布局用 DIV，小文本用 SPAN”——DIV 是 “容器”，用于划分结构；SPAN 是 “修饰符”，用于美化行内内容。
五、综合实例：DIV+CSS 实现企业网站布局
以 “苏州百特电器有限公司” 网站为例，采用DIV+CSS实现经典的 “头部 - 主体 - 底部” 三部分布局，核心结构如下：
5.1 布局结构分析
| 分区 | 作用 | 包含子元素 | 核心 CSS 属性 |
|---|---|---|---|
#header | 网站头部 | #logo（Logo）、#search（搜索）、#nav（导航） | width:100%、float（子元素浮动） |
#picture | banner 图区域 | 一张 banner 图片 | width:100%（图片自适应宽度） |
#main | 主体内容区（三栏布局） | #left（新闻）、#center（产品）、#right（联系） | width:1200px（固定宽度）、margin:0 auto（居中）、float（三栏浮动） |
#footer | 网站底部 | 版权信息、备案号 | width:100%、text-align:center（文本居中） |
5.2 核心代码实现
1. HTML 结构
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="style.css"> <!-- 外部CSS文件 --><title>苏州百特电器有限公司</title>
</head>
<body><!-- 头部 --><div id="header"><div id="logo"><img src="logo.png" alt="百特电器Logo"></div><div id="search"><table><tr><td>中文 | ENGLISH</td></tr><tr><td>关键词：</td><td><input type="text" name="keyword"></td><td><input type="image" src="search-btn.png"></td></tr></table></div><div id="nav"><a href="#">首页</a><a href="#">关于我们</a><a href="#">产品展示</a><a href="#">新闻资讯</a><a href="#">人才招聘</a><a href="#">联系我们</a></div></div><!-- Banner图 --><div id="picture"><img src="banner.png" alt="产品Banner"></div><!-- 主体（三栏布局） --><div id="main" class="clearfix"><div id="left"> <!-- 左栏：新闻资讯 --><h3>新闻中心</h3><ul><li><a href="#">本公司正式上线欢迎您的访问</a> 2013-06-06</li><li><a href="#">本公司正式上线欢迎您的访问</a> 2013-06-06</li></ul></div><div id="center"> <!-- 中栏：最新产品 --><h3>最新产品</h3><!-- 滚动展示产品图片 --><marquee onmouseover="this.stop()" onmouseout="this.start()"><img src="product1.png" alt="产品1"><img src="product2.png" alt="产品2"></marquee></div><div id="right"> <!-- 右栏：联系我们 --><h3>联系我们</h3><ul><li>咨询热线：</li><li>固定电话：0512-65787572</li><li>Email：eva@better-vac.com</li></ul></div></div><!-- 底部 --><div id="footer"><p>版权所有©2013 苏州百特电器有限公司 苏ICP备88886688 技术支持：中国万网</p></div>
</body>
</html>2. CSS 样式（style.css）
/* 全局样式重置：消除默认margin/padding */
body { margin: 0; padding: 0; font-family: "微软雅黑"; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #333; }/* 头部样式 */
#header { width: 100%; height: 120px; background: #fff; }
#logo { float: left; width: 200px; height: 80px; margin: 20px 0 0 50px; }
#search { float: right; width: 300px; height: 80px; margin: 20px 50px 0 0; }
#nav { clear: both; /* 清除上方浮动影响 */ width: 100%; height: 40px; background: #333; }
#nav a { color: #fff; margin: 0 30px; line-height: 40px; } /* 垂直居中 *//* Banner图样式 */
#picture { width: 100%; }
#picture img { width: 100%; height: auto; /* 图片自适应 */ }/* 主体三栏布局 */
#main { width: 1200px; margin: 20px auto; } /* 固定宽度+居中 */
#left { float: left; width: 250px; height: 300px; background: #f5f5f5; padding: 10px; }
#center { float: left; width: 600px; height: 300px; background: #f5f5f5; padding: 10px; margin: 0 20px; }
#right { float: right; width: 250px; height: 300px; background: #f5f5f5; padding: 10px; }/* 清除浮动：解决父元素高度塌陷 */
.clearfix::after {content: "";display: block;clear: both;visibility: hidden;height: 0;
}/* 底部样式 */
#footer { width: 100%; height: 80px; background: #f5f5f5; margin-top: 20px; }
#footer p { text-align: center; line-height: 80px; color: #666; }六、总结
- 核心定位：
DIV+CSS是现代网页布局的基础，div负责 “结构划分”，span负责 “行内修饰”，两者需配合display、position、float等 CSS 属性使用。 - 关键知识点：
- 元素类型（块级 / 行内 / 行内块）决定布局行为，可通过
display转换； position属性控制元素定位方式，absolute需注意参照物，fixed适合固定导航；- 浮动（
float）易导致父元素高度塌陷，需用clear或伪元素清除； div可嵌套形成层级结构，子层永远在父层之上，z-index仅在父层内部生效。
- 元素类型（块级 / 行内 / 行内块）决定布局行为，可通过
- 实战原则：
- 布局优先用
div，局部文本样式优先用span； - 避免过度嵌套（建议≤3 层），减少代码冗余；
- 样式尽量写在外部 CSS 文件（而非内联
style），提高可维护性； - 固定宽度布局常用
margin:0 auto实现居中，自适应布局需配合%或flex。
- 布局优先用