HTML <div> 區塊容器元素

<div> 標籤 (tag) 是用來當作容器 (container)，用來包裹其他 HTML，將 HTML 文件的內容整理出不同獨立區塊 (block)，用途是方便給 CSS 做樣式排版或方便給 JavaScript 做互動操作，至於 <div> 本身沒任何特殊意義也不帶任何標籤語意。

舉個例子：

<div class="shadowbox">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

我們將好幾個段落用 <div> 包在一起，在 <div> 上加個 id 或 class 屬性，就可以直接在這三個段落外面加上一個陰影框啦：

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

顯示結果：