iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
2
Modern Web

HTML 與 CSS 學習筆記系列 第 10

Day10 - HTML 與 CSS (1) - 區塊元素、行內元素

因為現在發現 HTML 和 CSS 都會交替用到,標題不好區分,就當個綜合應用吧!

區塊元素

  • CSS 設定:display: block
  • 盡可能佔滿版面
  • 會另起一行
  • 常見:<h1><p><ul><li>
  • <div>:用在排版的區塊標籤,本身不代表任何意思(非語意標籤),搭配 id 或 class 屬性就可以針對內容作調整設定

行內元素

  • CSS 設定:display: inline
  • 比較常用在段落裡
  • 沒辦法設定寬、高
    • display: inline 改成 display: block,如把 <a> 連結更改成區塊後,在點擊連結只要在區塊內都可以點擊得到
    • 反之可以把區塊元素改成行內元素,把 display: block 改成 display: inline
  • 常見:<a><img>
  • <span>:用在排版的行內標籤,本身不代表任何意思(非語意標籤),搭配 id 或 class 屬性就可以針對內容作調整設定

問題

  • 如何判別是區塊元素還是行內元素?
    • 更改背景顏色,如果會延伸版面就是區塊,反之只在範圍內就是行內元素

練習

針對剛剛的部分做個綜合練習

<h2>第 <span class="blue">12</span> 屆鐵人賽</h2>

<p>連到<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" target="_blank" title="連到鐵人賽" class="btn">第 12 屆鐵人賽</a></p>
    
.blue {
    color: blue;
}

.btn {
    color: white;
    background: blue;
    height: 25px;
    display: block;
}

結果如下,可以觀察到區塊以及有沒有換行的特性

參考資料

次回

繼續綜合介紹 HTML 和 CSS


上一篇
Day09 - CSS (4) - 線條、容器、重置 CSS
下一篇
Day11 - HTML 與 CSS (2) - 選擇器、margin、padding
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言