（图文详解）最通俗易懂的Html中元素的分类

（图文详解）最通俗易懂的Html中元素的分类

写在前面的话：

1、对刚开始接触CSS的同学弄明白元素的分类比较重要。
2、小菜水平有限，本文仅仅是入门教程，不当之处请谅解！

一、CSS的元素分类？

• 行内元素
• 块状元素
• 行内块元素

二、各元素的特点和区别

我们来看各元素的特点

1.行内元素

• 在页面中最小单位也是矩形。
• 在一行内逐个排列。
• 不可以直接添加宽高，大小是由内容撑开的。

代码图展示：

大家可以看到行内元素它是在一排横向排列的，此时我们没有设置元素的宽高，元素的大小是由内容撑起来的。

下面我们给它设置宽高看看有什么变化。


很清楚的看到，我们给行内元素设置宽高了过后元素的大小并没有发生任何变化。
所以我们得出结论行内元素不独占一行横向排列，且不具有设置宽高的属性，宽高是由内容的大小决定的。

2.块级元素

• 在页面中以矩形区域显示。
• 自上而下排列，独占一行
• 可以直接添加宽高

代码如下（示例）：

<h1>这是第一个标题标签</h1>
<h1>这是第二个标题标签</h1>
<p>这是第一个段落标签</p>
<p>这是第二个段落标签</p>

<style>

h1{
background-color:blue;
}
p{
background-color:"purple;
}
</style>

此时我们可以看到标题标签和段落标签是独占一行的。注意的是我们此时并没有给他们设置宽高，但是它们每个标签都充满一整行了。这是为什么呢？是因为块级元素默认是充满一整行的。而此时的高度是由内容决定的。

下面我们来看下改变过后的样式：


可以清楚的看到此时他们的宽和高都出现了变化，但是还是独占一行，这是因为块级元素的属性就是这样的。上面说到我们没有给设置宽高时，块级元素是独占一行的高度是由内容决定的。那么此时我们设置了宽高过后，宽度就不再是由默认的撑满一行而是我们设置的宽度，高度也不再由文字来撑满，而是由我们设置的高来决定的。

3.行内块级元素

• 在一行内逐个显示，之间有间距。
• 可以设置宽高。

代码如下（示例）：


此时我们可以看到还没有设置样式之前图片是在一行并排的。此时我们改变一下它的样式看下会出现什么样的效果。


此时我们可以很清楚的看到图片的宽高都变大了而且充满了页面的一整行。

三、总结

根据上面的讲述来看，我们可以对所有的标签分为三类

1、行内标签元素
行内元素不可以设置宽高，但横向排列。

2、块级标签元素
块级元素可以设置宽高，且独占一行。

3、行内块标签元素
行内块级元素可以设置宽高并且横向排列。

补充：

元素类型转换：
display属性：
作用：检索或者设置元素生成的盒模型类型。

常用属性值：

display:block;
作用：将元素转成块状元素，拥有块状元素特点。
补充：大部分块状元素，默认的display的值都是block;

display:inline;
作用：将元素转成内联元素，拥有内联元素的特点。
补充：大部分内联元素，默认的display的值inline;

display:none;

写在后面的话：
标签的元素分类在很多网站上面都可以查询到。这里放一个网站可以供大家参考借鉴。https://www.w3school.com.cn/index.html
希望刚开始学习的小伙伴加油，一步一步达到自己期望的目标。