携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
1️⃣前言
大家好，我是翼同学。今天的笔记内容是：
- 元素显示类型
2️⃣内容
✨显示类型
在CSS中，常见的元素显示类型有两种：inline 和 block。
我们通过display属性的不同取值，来设置盒子的不同显示类型。
另外，还有一种显示类型比较特殊，即inline-block，用于指定对象为内联块元素，其适用于特殊情况。
下面是这三种显示类型的记录：
- block的主要特征：
- 可以设置宽和高，默认与父容器具有相同宽度
- 每个块级盒子都会换行，也就是一行只能放一个块级元素
- 盒子设置border、padding、margin 会将其他元素从当前盒子周围“推开”
- 例如
<div>、<h>、<p>、ol、li、ul标签，默认属于block 状态
- inline的主要特征：
- 盒子不会产生换行，即一行可有显示多个
- 无法设置宽与高（width 和 height 属性将不起作用），默认宽度就是本身内容的宽度
- 水平方向上，margin和padding以及border会被应用，并且会将其他处于inline状态的盒子推开
- 垂直方向上，margin和padding以及border会被应用，但不会将其他处于inline状态的盒子推开
- 例如
<a>、<span>、<em>以及<strong>标签，默认处于 inline 状态的
- inline-block的主要特征：
- 具有块级元素和行内元素的特征，因此简称为行内块元素
- 一行可以显示若干个行内块元素，但是彼此之间会有空白间隙
- 默认宽度就是行内块元素本身的宽度
- 可以设置宽度和高度等，并且注意，设置padding、margin以及border会推开其他元素
🌱转换
在CSS中，通过display属性可以更改元素默认的显示类型。任何元素的display属性值都可以修改。
3️⃣写在最后
好了，今天的笔记就记到这里。
