行内、块级以及行内块元素区别

块级元素（block）

• 常见的块级元素有：

	<h1>~<h6>  <p>  <div>  <ul>  <ol>  <li>等

• 块级元素的特点：
  • 独占一行
  • 宽度默认是容器（父级宽度）的100%
  • 可以设置宽高
  • 是一个容器及盒子，里面可以放行内或者块级元素。

• 注意：
  • 只有文字才能组成段落 因此 p 里面不能放块级元素，特别是 p不能放div
  • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

行内元素（inline）

• 常见的行内元素有：

	<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

• 行内元素的特点：
  • 一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是它本身内容的宽度。
  • 只能容纳文本或则其他行内元素

• 注意：
  • 链接里面不能再放链接

行内块元素（inline-block）

• 常见的行内块元素有：

	<img />、<input />等

• 行内块元素的特点：
  • 一行可以显示多个，但是之间会有空白缝隙
  • 可以设置宽高
  • 默认宽度就是它本身内容的宽度。

三种模式区别总结如下：

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度