一、inline 元素、block 元素、inline-block 元素的具体解释

inline 元素

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

• 特点:

  • 和其他元素都在一行上。
  • 元素的高度、宽度、行高及顶部和底部边距不可设置。
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。

block 元素

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

• 特点:

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
  • 元素的高度、宽度、行高以及顶和底边距都可设置;
  • 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

inline-block 元素

• inline-block 元素，它像内联元素，但具有宽度和高度。

• 特点:

  • 和其他元素都在一行上；
  • 元素的高度、宽度、行高以及顶和底边距都可设置

二、常见的 inline 元素、block 元素、inline-block 元素

• 常见的 inline 内联元素：

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认 display：inline-block））

• 常见的 block 块级元素：

div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

• 常见的 inline-block 内联块元素：

img、input

三.inline 元素、block 元素、inline-block 元素的区别

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

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

• 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。