【网页前端】CSS进阶之元素的显示模式
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶之元素的显示模式
文章目录
1. 简述
HTML
提供丰富的标签，这些标签被定义成了不同的显示模式：
是像
div
自己独占一行，或是像
span
一行可以占多个。
为了 不同场景应用不同显示模式，更好布局页面，我们需要系统学习元素的显示模式。
元素的显示模式分为三种：
块元素（
block
）
行内元素（
inline
）
行内块元素（
inline-block
）
下面我们来分别学习
2. 块元素-block
块元素：以区域块方式出现。每个块标签默认
独占一整行区域
。块结束
会自动换行
常见的块元素：
<h1>
、
<p>
、
<div>
、
<ul>
等
块元素特点：
1
、 独占一行（宽度默认是父元素的
100%
），行末会自动换行
2
、
盒子模型可以自由控制
（宽、高、外边距、内边距）
3. 行内元素-inline
行内元素（内联元素）：根据内容多少来占用行内空间，
不会自动换行
常见的行内元素：
<span>
、
<a>
等
行内元素特点：
1
、
根据内容体多少来自动设置宽度
，一行有多个，不会自动换行
2
、 盒子模型中仅边框、内边距、左右外边距有效（
宽、高、上下外边距无效
）
4. 行内块元素-inline-block
行内块元素：同时具备块元素和行内元素的部分特点。
常见的行内块元素：
<img>
、
<input>
、
<td>
等
行内块元素特点：
1
、
根据内容体多少来自动设置宽度，
一行有多个，不会自动换行
2
、
盒子模型可以自由控制
（宽、高、外边距、内边距）
注意：若需要调节
span
的盒子，可以将
span
5. 显示模式的转换
display
属性可以使得元素 在行内元素和块元素之间相互转换。
格式：（
建议将
display
作为第一个属性
）
选择器
{display:
属性值
}
常用的属性值：
准备代码：
示例代码：
6. 清除-换行产生的空格
行内元素 或 行内块元素在代码中若有换行，在浏览器解析时，会变为一个空格显示。
解决方案：我们可以通过设置其父元素的字体大小为
0
，将空格缩小到
0
，不占用显示。
达到“清除“空格的目的
代码实现：
浙公网安备 33010602011771号