下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 14 期：CSS 页面布局中的块元素和内联元素
在网页布局中，HTML 元素通常分为两大类：
1️⃣ 块级元素（Block Element）
2️⃣ 内联元素（Inline Element）
理解这两种元素的区别，是学习 CSS 布局、Flex、Grid、响应式设计 的重要基础。
一、什么是块级元素（Block Element）
块级元素 是指在页面中 独占一行 的元素。
特点：
- 默认 独占一整行
- 可以设置 宽度和高度
- 可以设置 margin 和 padding
- 可以包含 块元素或内联元素
示例：
<div>这是一个块元素</div>
<div>这是第二个块元素</div>
页面效果：
这是一个块元素
这是第二个块元素
每个元素都会 自动换行。
二、常见块级元素
常见的块元素包括：
| 标签 | 说明 |
|---|---|
<div> | 最常用的布局元素 |
<p> | 段落 |
<h1> - <h6> | 标题 |
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 |
<section> | 内容区 |
<header> | 页头 |
<footer> | 页脚 |
示例：
<header>网页头部</header>
<section>网页内容</section>
<footer>网页底部</footer>
三、块元素的 CSS 特点
示例：
<div class="box"></div>
CSS：
.box{
width:200px;
height:100px;
background:red;
}
特点：
- 可以设置 宽度
- 可以设置 高度
- 可以设置 边距
四、什么是内联元素（Inline Element）
内联元素 不会独占一行，而是 在同一行排列。
特点：
- 不会换行
- 宽度由 内容决定
- 一般 不能设置宽高
示例：
<span>前端</span>
<span>开发</span>
<span>学习</span>
页面效果：
前端 开发 学习
五、常见内联元素
常见的内联元素：
| 标签 | 说明 |
|---|---|
<span> | 常用文本容器 |
<a> | 超链接 |
<strong> | 加粗 |
<em> | 斜体 |
<label> | 表单标签 |
<b> | 粗体 |
<i> | 斜体 |
示例：
<p>
这是一个 <span>重要</span> 的内容
</p>
六、内联元素的 CSS 特点
示例：
<span class="text">Hello</span>
CSS：
.text{
width:200px;
height:100px;
background:yellow;
}
结果：
- 宽高 不会生效
因为 内联元素默认不能设置宽高。
七、块元素 vs 内联元素
| 特性 | 块元素 | 内联元素 |
|---|---|---|
| 是否换行 | 会 | 不会 |
| 宽度 | 默认100% | 内容决定 |
| 高度 | 可以设置 | 一般不生效 |
| margin | 可以 | 部分有效 |
| padding | 可以 | 可以 |
八、display 属性
CSS 可以改变元素的显示类型。
使用：
display: 值;
常见值：
| 属性 | 说明 |
|---|---|
| block | 块元素 |
| inline | 内联元素 |
| inline-block | 行内块元素 |
| none | 隐藏元素 |
九、把内联元素变成块元素
示例：
<span class="box">Hello</span>
CSS：
.box{
display:block;
width:200px;
height:100px;
background:red;
}
结果：
span 变成 块元素。
十、把块元素变成内联元素
示例：
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
CSS：
.item{
display:inline;
}
结果：
A B C
三个元素在一行。
十一、行内块元素（inline-block）
inline-block 是一种 非常重要的布局方式。
特点：
- 不换行
- 可以设置宽高
示例：
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
CSS：
.card{
display:inline-block;
width:100px;
height:100px;
background:orange;
}
效果：
[1] [2] [3]
常用于：
- 商品卡片
- 图片列表
- 导航菜单
十二、实际开发中的应用
网页布局通常使用：
header
nav
main
aside
footer
结构示例：
<header>头部</header>
<nav>导航</nav>
<main>内容</main>
<footer>底部</footer>
这些通常都是 块级布局结构。
十三、现代布局方式
虽然块和内联是基础，但现代布局更多使用：
- Flex 布局
- Grid 布局
例如：
display:flex;
但理解 块元素与内联元素 是学习这些布局技术的基础。
十四、本期总结
网页元素主要分为：
| 类型 | 说明 |
|---|---|
| 块元素 | 独占一行 |
| 内联元素 | 同一行排列 |
CSS 可以通过：
display
改变元素类型。
常见值：
block
inline
inline-block
none
如果你愿意，我可以继续帮你整理下一篇：
第 15 期：CSS选择器全面详解（标签选择器 / 类选择器 / ID选择器 / 后代选择器 / 子选择器）
这一章是 CSS 学习最核心的内容之一，也是前端面试高频题。🚀
