WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-5. <標籤>特性、區塊特性 進一步多了解!有空多看看!

標籤的 display 屬性有很多種,最基本最常用的是以下三種,至少以下三種必須先了解清楚。

inline
(2)行中局部內容

block
display: inline
inline 是一行中的局部內容,沒有區塊特性。
寬高邊距特性
  • width 寬度、height 高度 無法設定
  • margin、padding 左右可以設定。
  • margin、padding 上下的設定並不佔攄父元素空間,
    類似於文字浮貼,margin、padding 飄起的效果。
line-height 行高 屬性
inline 屬性的元素有 行高 的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
因為 inline 特性的物件屬於內容節點,
必須由屬於 block 特性的父層定義 text-align: center
有哪些元素?
a、br、span ......

block
(1)段落式區塊

block
display: block
block 是段落式區塊特性。
寬高邊距特性

預設:寬度100% 高度0
就算寬度縮短,整個橫向區域還是這個區塊的,區塊外圍是 margin。

line-height 行高 屬性
屬於 block 特性的元素本身沒有 inline 屬性,不會產生多餘的留白距離。
當然區塊內的文字或影像是屬於有 inline 特性的物件,是有行高的存在。
水平置中的方式
由本身元素定義 margin-left: auto; margin-right: auto;
有哪些元素?
body、h1 ~ h6、p、ul、ol、li、div、header、footer、nav、main、aside、section、article、figure ......

inline-block
(3)行中局部區塊

position
display: inline-block
inline-block 是同行中的局部區塊。在 inline 特性中包含 block 的特性。
寬高邊距特性
  • width 寬度、height 高度 可以設定
  • margin、padding 四周皆可以設定。
line-height 行高 屬性
inline-block 屬性的元素有 行高 的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
仍然屬於內容節點,必須由屬於 block 特性的父層定義 text-align: center
有哪些元素?
img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......

範例參考

go TOP