HTML / CSS大前端
CSS 元素显示模式详解：块级、行内与行内块
CSS 元素显示模式决定 HTML 元素在页面中的排列方式与尺寸计算规则。主要分为块级元素、行内元素和行内块元素三种核心类型。块级元素独占一行且宽高可控；行内元素并排显示但宽高设置无效；行内块元素兼具两者特性。通过 CSS display 属性可转换元素显示模式，实现如小米侧边栏等布局效果。掌握这些模式是网页布局的基础。
CSS 元素显示模式决定 HTML 元素在页面中的排列方式与尺寸计算规则。主要分为块级元素、行内元素和行内块元素三种核心类型。块级元素独占一行且宽高可控；行内元素并排显示但宽高设置无效；行内块元素兼具两者特性。通过 CSS display 属性可转换元素显示模式，实现如小米侧边栏等布局效果。掌握这些模式是网页布局的基础。
元素显示模式指的是 HTML 元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素'如何展示自己'以及'如何与其他元素相处'。
浏览器会为每个 HTML 标签预设默认的显示模式，例如：
<div> 默认占据一整行（块级模式）<span> 默认与其他元素并排显示（行内模式）<input> 既可以并排显示又能设置宽高（行内块模式）我们可以通过 CSS 的 display 属性修改元素的显示模式，这是实现灵活布局的关键技巧。
典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer> 等
核心特性：
width 和 height 属性设置宽高margin 和 padding 的四个方向（上下左右）都能正常生效代码示例：
.change {
height: 200px;
background-color: aqua;
}
注意事项：
<p>、<h1>-<h6>）不能嵌套其他块级元素，例如 <p> 中不能放 <div>典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins> 等
核心特性：
width 和 height 设置无效，尺寸由内容决定margin 和 padding 仅左右方向生效，上下方向不影响布局代码示例：
.span1 {
/* 宽高设置无效 */
width: 100px;
height: 100px;
/* 背景色等样式有效 */
background-color: hotpink;
}
注意事项：
<a> 不能嵌套其他链接典型标签：<img>、<input>、<td> 等
核心特性：
width、height（块级元素特性）margin 和 padding 四个方向均有效（块级元素特性）代码示例：
input {
width: 249px;
height: 50px;
}
实际开发中，我们经常需要改变元素的默认显示模式以实现特定布局。CSS 提供了三种主要转换方式：
display: block适用场景：
<a>）独占一行.a1 {
width: 150px;
height: 50px;
/* 转换为块级元素 */
display: block;
background-color: pink;
}
display: inline适用场景：
<div>）并排显示.change2 {
/* 转换为行内元素 */
display: inline;
}
display: inline-block适用场景：
.change3 {
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换为行内块元素 */
display: inline-block;
}
以小米官网侧边栏为例，展示元素显示模式转换的实际应用：
实现思路：
<a> 转换为块级元素，使其独占一行并可设置宽高line-height 实现文字垂直居中.a-change {
color: white;
width: 230px;
height: 40px;
background-color: #535758;
/* 转换为块级元素 */
display: block;
text-decoration: none;
font-size: 14px;
text-indent: 2em;
/* 文字垂直居中（行高=盒子高度） */
line-height: 40px;
}
/* 鼠标悬停效果 */
a:hover {
background-color: #ff6700;
}
HTML 结构：
<a href="#" class="a-change">手机 电话卡</a>
<a href="#" class="a-change">电视 盒子</a>
<a href="#" class="a-change">笔记本 平板</a>
<!-- 更多链接 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<style>
/* 111.块元素 */
.change {
/* width: 200px; */
height: 200px;
background-color: aqua;
}
/* 222.行内元素 */
.span1 {
/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
width: 100px;
height: 100px;
background-color: hotpink;
}
/* 333.行内块元素 */
input {
width: 249px;
height: 50px;
}
/* --- 元素显示模式的转换 --- */
/* 这里想要增加链接<a>的触发范围 */
.a1 {
width: 150px;
height: 50px;
/* 1.把行内元素<a>转换为块级元素 这样 width 和 height 的修改才能生效 */
display: block;
background-color: pink;
}
.change2 {
/* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */
display: inline;
}
.change3 {
/* 把行内元素转换为行内块元素 */
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */
display: inline-block;
}
/* 简洁版小米侧边栏案例 */
.a-change {
/* 设置字体颜色 */
color: white;
width: 230px;
height: 40px;
background-color: #535758;
/* 把行内元素转换为块元素 */
display: block;
/* 取消链接下划线 */
text-decoration: none;
font-size: 14px;
/* 空两个格子 */
text-indent: 2em;
/* ! 实现单行文字垂直居中 ! --> 解决方案：让文字的行高等于盒子的高度 */
/* 原理：行高由上空隙、文本本省的高度、下空隙组成 简单理解：行高的上空隙和下空隙把文字挤到中间了， 所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下 */
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
del {
display: block;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!-- 块元素测验 -->
<div class="change">比较霸道，自己独占一行</div>
<!-- 不能这么用！！用浏览器检查会发现有问题 -->
<p><div class="change">这里有问题</div></p>
<!-- 行内元素测验 -->
<span class="span1">pink 老师你怎么穿着品如的衣服呢</span>
<strong>品如的衣服</strong>
<span class="span1">pink 老师</span>
<strong>品如的衣服</strong>
<!-- 行内块元素测验 -->
<input type="text"/>
<input type="text"/>
<!-- 元素模式的转换测验 -->
<!-- 这里想要增加链接<a>的触发范围 -->
<a href="#" class="a1">夏至未至</a>
<a href="#" class="a1">夏至未至</a>
<!-- 使块级元素在一行显示多个 -->
<div class="change2">我是块级元素，将要通过元素转换模式 (改为行内元素)</div>
<div class="change2">我是块级元素 </div>
<!-- 想行内元素的宽度和高度 -->
<span class="change3">把行内元素转换为行内块元素</span>
<span class="change3">把行内元素转换为行内块元素</span>
<br/>
<!-- 简洁版小米侧边栏案例 主要思路 1.链接<a>要实现竖着显示 (行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度) 2.链接有背景颜色，鼠标经过<a>时链接变色 -->
<a href="#" target="_blank" class="a-change">手机 电话卡</a>
<a href="#" class="a-change">电视 盒子</a>
<a href="#" class="a-change" target="_blank">笔记本呢 平板</a>
<a href="#" class="a-change">出行 穿戴</a>
<a href="#" class="a-change">智能 路由器</a>
<a href="#" class="a-change">健康儿童</a>
<a href="#" class="a-change">耳机 音响</a>
<del>你好啊</del>林七夜
</body>
</html>
显示效果：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online