常见的inline元素、block元素、inline-block元素它们之间有什么区别

1⃣️什么是 block  inline 和 inline-block元素？

     inline是内联元素

     一个内联元素不会开始新的一行，并且只占有必要的宽度。

     block是块级元素

     一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

      inline-block是内联块元素

      它像内联元素，但具有宽度和高度

2⃣️ 各自具有什么特点？

       inline元素:

           (1)、和其他元素都在一行上；

           (2)、元素的高度、宽度、行高及顶部和底部边距不可设置；

           (3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。

      block元素:

           (1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;

           (2)、元素的高度、宽度、行高以及顶和底边距都可设置;

           (3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

      inline-block元素:

           (1)、和其他元素都在一行上；

           (2)、元素的高度、宽度、行高以及顶和底边距都可设置

     

2⃣️互相之间的区别

      区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。

       (1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

       (2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

       (3)块级元素