🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶之元素的显示模式
文章目录
1. 简述
2. 块元素-block
3. 行内元素-inline
4. 行内块元素-inline-block
5. 显示模式的转换
6. 清除-换行产生的空格
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 ，不占用显示。
达到“清除“空格的目的
代码实现：
