區塊容器 <div>
HTML 裡的 <div>
是十分常見的「區塊容器」,只要任何需要排版的位置,可能都會透過 <div>
搭配 CSS 或 JavaScript 進行編排,這篇教學會介紹 <div>
區塊容器元素。
認識 <div>
HTML 的區塊容器元素是 <div>
標籤所構成的元素,可以用來包裹任何文字、影音元素、表格、清單...等任何網頁元素,時常會透過 CSS 或 JavaScript 控制樣式或進行互動。
<div>
屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。<div>
的顯示類型為「block 塊級元素」,預設會強制換行。
例如下方的 HTML 開啟後,會以 <div>
將文字分成三個區塊。
<div>床前明月光,疑是地上霜,舉頭望明月,低頭思故鄉。</div>
<div>春眠不覺曉,處處聞啼鳥,夜來風雨聲,花落知多少。</div>
<div>千山鳥飛絕,萬徑人蹤滅,孤舟蓑笠翁,獨釣寒江雪。</div>
<div>
支援屬性
<div>
支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會分別將三個 <div>
加入不同的 style 屬性,讓三組文字呈現不同顏色。
<div style="color:#f00;">床前明月光,疑是地上霜,舉頭望明月,低頭思故鄉。</div>
<div style="color:#f90;">春眠不覺曉,處處聞啼鳥,夜來風雨聲,花落知多少。</div>
<div style="color:#00f;">千山鳥飛絕,萬徑人蹤滅,孤舟蓑笠翁,獨釣寒江雪。</div>
<div>
預設樣式
下方是 <div>
的預設樣式:
div {
display: block;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~