🌈
个人主页: Hygge_Code
🔥
热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫
个人格言: “既然选择了远方，便不顾风雨兼程”
文章目录
-
- CSS元素显示模式
-
- 2.1 什么是元素显示模式？
- 2.2 三大核心显示模式详解
-
- 1. 块级元素（Block Level Elements）
- 2. 行内元素（Inline Elements）
- 3. 行内块元素（Inline-Block Elements）
- 2.3元素显示模式的转换语法
-
- 1. 转为块级元素：`display: block`
- 2. 转为行内元素：`display: inline`
- 3. 转为行内块元素：`display: inline-block`
- 2.4 实战案例：小米侧边栏实现
- 2.5综合代码演示
- 学习资源推荐🐦🔥
CSS元素显示模式
2.1 什么是元素显示模式？
元素显示模式指的是HTML元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素"如何展示自己"以及"如何与其他元素相处"。
浏览器会为每个HTML标签预设默认的显示模式，例如：
- <div>默认占据一整行（块级模式）
- <span>默认与其他元素并排显示（行内模式）
- <input>既可以并排显示又能设置宽高（行内块模式）
我们可以通过CSS的display属性修改元素的显示模式，这是实现灵活布局的关键技巧。
2.2 三大核心显示模式详解
1. 块级元素（Block Level Elements）
典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer>等
核心特性：
- 独占一行：无论内容多少，都会单独占据一整行空间
- 尺寸可控：可以通过width和height属性设置宽高
- 默认宽度：未设置时默认占满父容器的100%宽度
- 边距生效：margin和padding的四个方向（上下左右）都能正常生效
- 容器特性：可以嵌套其他块级元素或行内元素
代码示例：
.change {
height: 200px;
background-color: aqua;
}
注意事项：
- 文字类块元素（如<p>、<h1>-<h6>）不能嵌套其他块级元素，例如<p>中不能放<div>
- 块元素虽然可以嵌套行内元素，但语义上应保持合理（如导航容器嵌套链接）
2. 行内元素（Inline Elements）
典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins>等
核心特性：
- 并肩排列：多个行内元素可以在同一行显示
- 尺寸受限：width和height设置无效，尺寸由内容决定
- 边距限制：margin和padding仅左右方向生效，上下方向不影响布局
- 嵌套限制：只能容纳文本或其他行内元素，不能嵌套块级元素
代码示例：
.span1 {
/* 宽高设置无效 */
width: 100px;
height: 100px;
/* 背景色等样式有效 */
background-color: hotpink;
}
注意事项：
- 链接<a>不能嵌套其他链接
- 行内元素虽然不能设置宽高，但可以通过转换显示模式实现（见后文）
3. 行内块元素（Inline-Block Elements）
典型标签：<img>、<input>、<td>等
核心特性：
- 兼具两者优点：
- 可以和其他行内元素并排显示（行内元素特性）
- 可以设置width、height（块级元素特性）
- margin和padding四个方向均有效（块级元素特性）
- 默认宽度：由内容决定（类似行内元素）
- 间隙特性：相邻行内块元素之间会有默认空白间隙
代码示例：
input {
width: 249px;
height: 50px;
}
2.3元素显示模式的转换语法
实际开发中，我们经常需要改变元素的默认显示模式以实现特定布局。CSS提供了三种主要转换方式：
1. 转为块级元素：display: block
适用场景：
- 需要让行内元素（如<a>）独占一行
- 需要为行内元素设置宽高
- 需要让链接等可点击区域扩大
.a1 {
width: 150px;
height: 50px;
/* 转换为块级元素 */
display: block;
background-color: pink;
}
2. 转为行内元素：display: inline
适用场景：
- 需要让块级元素（如<div>）并排显示
- 需要取消块级元素的默认独占一行特性
.change2 {
/* 转换为行内元素 */
display: inline;
}
3. 转为行内块元素：display: inline-block
适用场景：
- 需要元素并排显示且能设置宽高（如导航按钮、表单控件）
- 需要保持行内特性的同时拥有块级元素的尺寸控制能力
.change3 {
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换为行内块元素 */
display: inline-block;
}
2.4 实战案例：小米侧边栏实现
以小米官网侧边栏为例，展示元素显示模式转换的实际应用：
实现思路：
.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>
<!– 更多链接 –>
实现效果： 
2.5综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<!– —— 元素显示模式 —— –>
<!– 1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页
2.元素显示模式就是 元素(标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个
3.HTML元素一般分为 块元素 和 行内元素 两种类型
–>
<style>
/* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素
11.块元素特点：
1.独占一行
2.高度、宽度、外边距和内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器和盒子，里面可以放行内或块级元素
22.注意：
1.文字类元素不能使用块元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
例如： <p>
<div>这里有问题</div> (使用浏览器的审查器即可发现问题)
</p>
*/
.change {
/* width: 200px; */
height: 200px;
background-color: aqua;
}
/* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中<span>是最典型的行内元素（内联元素）
11.行内元素的特点：
1.相邻行内元素在一行上，即一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本后者其他行内元素
22.注意：
1.链接里面不能再放链接
2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全
*/
.span1 {
/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
width: 100px;
height: 100px;
background-color: hotpink;
}
/* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*/
/* 11.行内块元素的特点
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定）
2.默认宽度就是它本身内容的宽度（行内元素的特点）
3.高度、行高、外边距和内边距都可以控制（块级元素的特点）
*/
input {
width: 249px;
height: 50px;
}
/* — 元素显示模式的转换 — (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*/
/*
1. 转换为块元素：display:block
2. 转换为行内元素：display:inline;
3. 转换为行内块元素：display:inline-block;
*/
/* 这里想要增加链接<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="picture/img1.jpg" class="a1">夏至未至</a>
<a href="picture/img1.jpg" 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="https://re.jd.com/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机
电话卡</a>
<a href="picture/img1.jpg" 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>
显示效果： 
学习资源推荐🐦🔥
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
