1、前言

大家好，我是翼同学。今天的笔记内容是：

• 元素显示类型

2、内容

✨显示类型

在 CSS 中，常见的元素显示类型有两种：inline 和 block。

我们通过 display 属性的不同取值，来设置盒子的不同显示类型。

另外，还有一种显示类型比较特殊，即 inline-block，用于指定对象为内联块元素，其适用于特殊情况。

下面是这三种显示类型的记录：

• block 的主要特征：

1. 可以设置宽和高，默认与父容器具有相同宽度

2. 每个块级盒子都会换行，也就是一行只能放一个块级元素

3. 盒子设置 border、padding、margin 会将其他元素从当前盒子周围“推开”

4. 例如<div>、<h>、<p>、ol、li、ul标签，默认属于 block 状态

• inline 的主要特征：

1. 盒子不会产生换行，即一行可有显示多个

2. 无法设置宽与高（width 和 height 属性将不起作用），默认宽度就是本身内容的宽度

3. 水平方向上，margin 和 padding 以及 border 会被应用，并且会将其他处于 inline 状态的盒子推开

4. 垂直方向上，margin 和 padding 以及 border 会被应用，但不会将其他处于 inline 状态的盒子推开

5. 例如<a>、<span>、<em>以及<strong>标签，默认处于 inline 状态的

• inline-block 的主要特征：

1. 具有块级元素和行内元素的特征，因此简称为行内块元素

2. 一行可以显示若干个行内块元素，但是彼此之间会有空白间隙

3. 默认宽度就是行内块元素本身的宽度

4. 可以设置宽度和高度等，并且注意，设置 padding、margin 以及 border 会推开其他元素

🌱转换

在 CSS 中，通过 display 属性可以更改元素默认的显示类型。任何元素的 display 属性值都可以修改。

3、写在最后

好了，今天的笔记就记到这里。