__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 中，已經不使用這兩個概念了，而是用了更復雜的