HTML 區塊與行內元素

更新 發佈閱讀 2 分鐘

區塊(block)元素特點

1.區塊(block)元素都會另起一行。

2.hiehgt、line-height、margin、padding 的高度與寬度都可以設置。

3.默認情况下,區塊元素的寬度會自動填满其父元素寬度延申,寬度100%的情況下會自適應延申佔滿整個區塊。

4.可以設置寬高 width hight

5.區塊元素常見包括

div、p、h1~h6、ul、ol、li、form、table。

<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等等

6.<div>:用在排版的區塊標籤,本身不代表任何意思


行內(inline)元素特點

1.和其他元素都在同一行上,相鄰的行内元素会並排在同一行,

直到一整行排不下才會換行,其寬度隨元素的内容而變化。

2.設置寬度與高度無效,只能由内容撑起来,即行内元素設置width,height屬性無效。

3.無法設罝margin、padding的上下,只能設置padding 、margin左右,此時才會有效果出來。

4.水平方向的padding-left 、padding-right、margin-left、margin-right都會產生效果,但上下方向的padding-top、padding-bottom、margin-top 、margin-bottom不會產生邊距效果。

5.行內元素常見包括

a、span、img、input、br...等

6.若想對行內元素設置寬、高度,可以寫成 display: block 就可以設罝margin、padding的高度,例如如把 <a> 連結更改成區塊元素後,只要在點擊連結時都可以在區塊內部都可以點擊得到。


inline-block 的特點


1、會依照元素的內容決定內容的寬高,不會佔滿橫向的剩餘空間

2、可設置元素的寬高, width , height , max-width, max-height 與 line-height,也可以設罝 padding-top , padding-bottom。

3 同時俱有 block 與 inline 的特性。

留言
avatar-img
tina huang的沙龍
0會員
1內容數
你可能也想看
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
高中數學主題練習—向量分點公式
Thumbnail
高中數學主題練習—向量分點公式
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News