__x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

1. 块元素block

• 独占一行的元素
  • 一般使用块元素包含内联元素，用作页面布局
  • <a> 标签可以包含任何除了a标签以外的元素
  • <p> 标签不能包含块元素
  • h1... ...h6
  • <hr />
  • <center></center>
  • <div> 标签不含任何语义，被用于页面布局

---

2. 内联元素 inline

行内元素        只占自身大小的位置，不会独占一行。通常用于选中文本，设置样式

• 内容区    不能设置 width 和 height ，设置了没用。
• 水平方向 内边距，可以设置，会影响布局，正常
• 垂直方向 内边距，可以设置，不会影响布局，会覆盖原位置其他元素
• 水平方向的 边框，可以设置，会影响布局，正常
• 垂直方向的 边框，可以设置，不会影响布局，会覆盖原位置其他元素
• 水平方向的 外边距，可以设置，且不会重叠，而是求和增加
• 垂直方向的 外边距，不能设置
  • <span></span> 无任何语义，用于选中行内内容，进行样式设置
  • <img></img>
  • <a></a>
  • <iframe></iframe>

---

 

3. 行内块元素 inline-block

既有块元素特点，又有内联元素的特点。

既可以设置 width 和 height，又不会独占一行。

---

 值得注意的是：

在 HTML5 中，已经不使用这两个概念了，而是用了更复杂的