行级元素，块级元素，行内块元素

定义

块级元素：独占一行，可以设置宽度高度，设置内外边距

行级元素：在同一行，宽度和高度由内容决定，没有内外边距的说法

行内块元素：在同一行，但是可以设置高度和宽度以及内外边距

块级元素(block)

常见的块元素有<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等，其中<div>,<p>标签是最典型的块元素

行级元素(inline)

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>,<a>标签最典型的行内元素

行内块元素(inline-block)

在行内元素有几个特殊的标签 <img />,<input />,<td>,可以对它们设置宽高和对齐属性，称为行内块元素,其中<input />最常见

示例：

<div style="display: inline;">
  <div >
    div:这是块级元素1
  </div>
  <div >
    div:这是块级元素2
  </div>
</div>
<div style="display: inline">
  div:这是块级元素3
</div>
<div style="display: inline">
  div:这是块级元素4
</div>
<p>
  p:这是块级元素
</p>
<p>
  p:这是块级元素
</p>

<a >
  a:这是行内元素
</a>
<a>
  a:这是行内元素
</a>

<div>
  行内块元素:具有块级元素的行为（可以设置高宽，内外边距，但是还是同一行）
  <input placeholder="这是行内块元素" style="margin-right: 20px"/>
  <input placeholder="这是行内块元素"/>
</div>

图示：