块级元素 内联元素 的区别 ，空元素

1.块级元素

常见的块级元素：

    display:block/table 的元素
    <div></div>
    <ul></ul>
    <li></li>
    <h1></h1>
    <h2></h2>
    <p></p>

2.内联元素

常见的内联元素：

    display:inline/inline-block 的元素
    <span></span>
    <a></a>
    <img/>
    <b></b>
    <td></td>

内联元素又叫行内元素
特点: 和其他元素都在一行上;

3.空元素

常见的空元素

    <hr>
    <img>
    <input>
    <link>
    <meta>

空元素：表示没有内容的html元素 在开始的标签中就关闭了 比如 《img/》 而不是 《a》《/a》。也就是说 空元素没有闭合标签

4.块级元素跟内联元素的区别？

1. 展示方式不同
   • 块级元素 都是从新的一行开始 独占一行
   • 内联元素 是一个挨着一个 从左至右的顺序进行排序 不会独占一行 直到一行排序不下的时候 才会进行换行
2. 高度不同
   • 块级元素 高度 行高 以及外边距 内边距 都是可以控制的 方便容纳内联元素和其它块级元素
   • 内联元素 高度 行高和顶及底边距都是不可改变的（通过css 属性display：block 改为块级元素 就可以改变了）
3. 宽度不同
   • 块级元素 其宽度会自动填满父元素宽度
   • 内联元素 其宽度随元素的内容变化