iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
tags: 2019年鐵人賽css

學習來源

Block-level element

用過的有<div><p><h1>~<h6><ul><li>等等。其他MDN有詳細列表

我理解的Block element

摘自MDN
By default, block-level elements begin on new lines.

Generally, block-level elements may contain inline elements.

  • 自己獨佔一整個 row,Block elements 各自會從新的 row 開始,適合垂直排列時的操作
  • 可包含其他 block elements 或 inline elements
  • width 預設會填滿父層寬度
  • 可以設定 widthheightmarginpadding

範例
HTML,沒有設定CSS

<p>我是p</p>
<h1>我是h1</h1>
<div>我是div</div>
  1. Block 元素會從新的 row 開始

  2. width 預設會填滿父層寬度

    • 藍色區表示 <p> 的內容,內容寬度自動佔滿整個父層
    • 要注意 HTML tag 在瀏覽器呈現都不太ㄧ樣, 像 <p> tag 在 Chrome 有 margin-topmargin-bottom,所以才有 reset 或 normalize 來清除預設樣式


上一篇
|D7| JS - Google Charts 統計圖表
下一篇
|D9| Web Server - 解剖URL
系列文
前端菜焦阿日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言