【网页前端】CSS进阶之元素的显示模式

👀专栏介绍

【前端网页】 目前主要更新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 ，不占用显示。

达到“清除“空格的目的

代码实现：