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
留言分享你的想法!
avatar-img
tina huang的沙龍
0會員
1內容數
你可能也想看
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
高中數學主題練習—向量分點公式
Thumbnail
高中數學主題練習—向量分點公式
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News