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
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
高中數學主題練習—向量分點公式
Thumbnail
高中數學主題練習—向量分點公式
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—根式化簡
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
高中數學主題練習—求空間中平面
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News