内联元素（行内元素），块状元素，行内块状元素的区别

元素

HTML 元素指的是从开始标签到结束标签的所有代码。

元素的分类方式分为行内元素、块状元素和行内块状元素三种，这三者可以通过设置display属性值实现相互转化。

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

行内元素（内联元素）

1.内联元素（html规范中的概念）英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。
2.内联元素的显示:都在同一行按从左至右的顺序显示，不单独占一行。
3.常见的内联元素以span标签为主，其他的还有：b，i，u，sub，sup标签等。

1.特性：

1.内容在同一行显示，不会自动进行换行。
2.设置宽高（width，height），设置行高无效（line-height）无效。
3.padding四个方位设置均有效，会增加空间。margin上下设置无效，左右设置有效。

2.代码测试：

初始状态的设置与页面呈现：
`span{
border: 1px solid black;
background-color: #ff6a6b;
}

<span>第一个行内元素</span>
<span>第二个行内元素</span>
<span>第三个行内元素</span>
<span>第四个行内元素</span>

加入行高，宽度设置得到如下结果：

span{
            border: 1px solid black;
            background-color: #ff6a6b;
            height: 400px;  /*高度不能设置*/
            width: 7800px;  /*宽度不能设置*/
            line-height: 40px;   /*行高不能设置*/
            margin-bottom: 20px;  /*无效*/
            margin-top: 40px;   /*无效*/
            margin-left: 50px;     /*有效*/
            margin-right: 70px;  /*有效*/
            padding:20px;  /*有效*/

        }

块（级）元素

块元素又名块级元素(block element)。块元素指的是占据全部可用宽度的元素。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。

1.特性

1.多个块状元素标签写在一起，默认排列方式为从上至下
2.可以自动换行
3.宽高，行高设置均有效。
4.padding和margin四个方位的设置也都有效。

2.代码测试

初始状态：

 #div1{
            font-size: 20px;

        }
        #div2{
            font-size: 20px;
            border: 1px solid black;
            width:100px;
            height: 100px;
            background-color: #FFEE33;

        }
        #div3{
            font-size: 20px;
            border: 1px solid black;
            width:200px;
            height: 200px;
            background-color: #28ff2e;
            margin: 4px;
            padding: 10px;
            line-height: 40px;

        }

<div id="div1">第一个块级元素</div>
<div id="div2">第二个块级元素</div>
<div id="div3">第三个块级元素</div>

页面呈现：
通过白色区域和换色区域的对比可知，块级元素可以识别宽和高。

现在给div3加入行高，边距的设置。
观察div2和div3。

 #div3{
            font-size: 20px;
            border: 1px solid black;
            width:200px;
            height: 200px;
            background-color: #28ff2e;
            margin: 4px;
            padding: 10px;
            line-height: 40px;

        }

通过对比可以发现新增的padding，margin，line-height设置都有效。

行内块状元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

特征：

1.不自动换行
2.能够识别宽高
3.默认排列方式为从左到右

代码测试（三种元素的转化 和行内块状特征的验证）：

在块状代码测试的基础上 进行更改

初始：

分别设置display样式：