芜湖，又是一周的学习。本周想来复习的一个知识点是元素的类型。因为我老是搞混hahha

在vscode里输入这几行代码，这几个标签会有什么不同的效果呢？

打开浏览器，展示。

哦？除了div标签，其他标签都是在一行显示。那假如加宽高背景色来试试呢？

ok，我现在给所有的标签都加上了宽高背景色的属性，来看看会有什么效果呢？

❓哦莫？？可以看到div和td标签的宽高都生效了，span标签却没有。这是什么原因呢，这就是元素类型的影响了。

首先我们需要清楚的理论知识是，css的元素属性分为三种：块级元素，行内块，以及行内元素。

块级元素

人如其名，就是一个块级的元素，哈哈哈。不是，就是类似于一块一个大盒子一样的元素，它会独占一行，没有设置宽度时，默认为整个浏览器的宽度或者它父级元素的宽度。

块级元素的特点有： 1、独占一行，两个块级元素默认上下排排列；

2、可以设置宽高等， width、height、padding、margin 等属性。

3、可以包含行内及行内块元素，毕竟他是一个大盒子。

4、常见的块级元素有 div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr。

在实际运用中，（本菜鸟的实际接触中哈哈哈）块级元素经常用来当作一个大盒子，包容万物，可以给他设置宽高背景色各种属性，里面装万物。

行内块元素

行内块，听名字来说就觉得，很懵，又是块，又在一行内吗？的确如此，它能够像块级元素一样设置宽高，又可以像行内元素一样，在一行显示，是不是很好用呀？就如最开始的td标签，两个宽高都生效了，但又在一行。

行内块元素的特点：

1、多个元素在行内并列显示。

2、行内元素自身没有宽高，由自身内容撑开。可以设置宽高等属性。

3、常见的行内块元素：input、textarea、button、select，td。

行内元素

行内元素就是span这一类的

1、一行内显示，不设置宽高。由内容撑开。

2、常见的行内元素有a,span、i、em、strong、b.

3、 行内元素只能容纳文本或则其他行内元素。

ok以上就是三种元素的各自特征和常见类型了。那其实日常运用中，很多时候就又想要一个元素有宽高属性，又想要他们在一行内显示，怎么办呢？ 那就不得不说我们的转换模式了

三种元素类型的模式转换代码：

• 块级元素转行内元素：display:inline;
• 行内元素转块级元素：display:block;
• 块级元素、行内元素转换为行内块元素： display: inline-block; 如下：我们最开始代码的span，是行内元素，只有他俩宽高没生效，那我们来转化试试：

我现在给span加了一个转化为行内块，行内块的话，可以显示宽高，在浏览器中打开试试：

神奇一刻，确实宽高生效了，试试看吧~

期待下一次我学到更炫酷的页面( •̀ ω •́ )y