1-4. <標籤> 的展示特性

標籤顯示特性

display: none;隱藏不顯示
display: block;段落式區塊框
display: inline;行中局部內容
display: inline-block;行中局部區塊框
display: table;表格框
display: table-row;表格中的 tr 一列的框
display: table-cell;表格中的 th/td 一格的框
display: flex;段落式的彈性框
display: inline-flex;行中局部的彈性框
display: flex;段落式的彈性框

基礎常用重要的３個標籤顯示特性

inline
(2)行中局部內容

inline

display: inline

inline 是一行中的局部內容，沒有區塊特性。

寬高邊距特性

width 寬度、height 高度無法設定。
margin、padding 左右可以設定。
margin、padding 上下的設定並不佔攄父元素空間，
類似於文字浮貼，margin、padding 飄起的效果。

水平置中的方式

因為 inline 特性的物件屬於內容節點，
必須由屬於 block 特性的父層定義 text-align: center 。

line-height 行高屬性

有行高的存在，與前後元素或是父元素會產生留白距離。
參看：相關行高的觀念與影響
有 inline 特性的元素才有 vertical-align 垂直對齊的需求。

有哪些元素？

a、span ......

block
(1)段落式區塊

block

display: block: block 是段落式區塊特性。
寬高邊距特性: 預設：寬度100% 高度0。
就算寬度縮短，整個橫向區域還是這個區塊的，區塊外圍是 margin。
水平置中的方式: 由本身元素定義 margin-left: auto; margin-right: auto;。
line-height 行高屬性: 屬於 block 特性的元素本身沒有 inline 屬性，不會產生多餘的留白距離。
當然區塊內的文字或影像是屬於有 inline 特性的物件，是有行高的存在。
有哪些元素？: body、h1 ~ h6、p、ul、ol、li、div、header、footer、nav、main、aside、section、article、figure ......

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

inline-block

display: inline-block

inline-block 是同行中的局部區塊。在 inline 特性中包含 block 的特性。

寬高邊距特性

width 寬度、height 高度可以設定。
margin、padding 四周皆可以設定。

水平置中的方式

仍然屬於內容節點，必須由屬於 block 特性的父層定義 text-align: center 。

line-height 行高屬性

有行高的存在，與前後元素或是父元素會產生留白距離。
參看：相關行高的觀念與影響
有 inline 特性的元素才有 vertical-align 垂直對齊的需求。

有哪些元素？

img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......

範例參考

接下來學習的重要提醒： ❶ 觀念要了解，功能的分類要清楚，至少記住編碼的關鍵字即可。
❷ 設計前要構思 (目標是？題目是？)
❸ 設計前擬腳本 (以中文儘量詳細地描述出要做些什麼？)
❹ 設計時大膽嘗試 (忘記沒關係，有明確的腳本即可搜尋獲得)
❺ 設計時隨時注重觀察 (多多利用 Chrome 的檢查面板)

區塊組成模式

區塊計算模式

margin 的三心二意

測試：

以下綠色區域只是 <p> 段落區塊，除了背景顏色只設定「margin: 20px」。

結果：

段落元素區塊的 display : block 並且沒有浮動，margin 是彼此的距離。

段落文字區域段落文字區域段落文字區域段落文字區域段落文字區域

測試：

以下第二層淡藍色區域是 <span> 設定「 display: inline-block; width: 18%; height: 50px; margin: 1%;」。
以下淡粉紅色區域只是 <div> 區塊，除了背景顏色只設定「overflow: hidden」，
以下第二層洋紅色區域是 <div> 區塊，設定「height: 100px; width: 23%; float: left; margin: 1%;」。

結果：

如果 display 是 inline 或 inline-block 的元素時，margin 是元素外圍強佔的外邊界。
內層區塊的 display 是 block，但設定了浮動，所以 margin 是區塊元素強佔的外邊界。

測試：

以下淡藍色區域只是 <header> 區塊，除了背景顏色沒有任何設定，
深藍色區域是 <div> 區塊，除了顏色只設定「margin: 50px;」

結果：

左右部份沒有問題，但是上下部份好像怪怪的？
內層區塊的 margin 與外層區塊的 margin 似乎產生了合併現象，
感覺上好像是外層區塊將 margin 搶去做了？

外圍淡藍色區域是 <header> 區塊，內層深藍色區塊是 <div> 區塊

參考：

W3C官網原文說明，這是 margin 的 Collapsing 狀況,
margin 的 Collapsing 狀況只有在沒有浮動的上下之間才會產生, 浮動時不會, 左右之間也不會。
當同一層第一個子元素設定 margin-top 時，會與上一層(父層)的 margin 區合併。
當同一層最後一個子元素設定 margin-bottom 時，會與上一層(父層)的 margin 區合併。

連續影像之間為什麼有距離

如果原始碼只有 <img> 為什麼左右有距離？看結果

如果原始碼只有 <img> 為什麼上下有距離？看結果

認識行高的影響！

認識文字的行高

如下範例，藍色背景區域表示一個 <p> 段落區塊，測試行高的設定。

測試測試測試測試測試 ----- line-height: normal;

測試測試測試測試測試 ----- line-height: 1rem;

測試測試測試測試測試 ----- line-height: 1; 表示 1 倍高

測試測試測試測試測試 ----- line-height: 2rem;

測試測試測試測試測試 ----- line-height: 2; 表示 2 倍高

測試測試測試測試測試 ----- line-height: 5rem;

測試測試測試測試測試 ----- line-height: 5; 表示 5 倍高

同時有圖文時 line-height 行高在哪裡？

測試測試預設 line-height 就不是 1 , 並且 inline 元素的 vertical-align 是 baseline

測試測試設定 line-height 為 5 , 並且 inline 元素的 vertical-align 仍然是 baseline

測試測試設定 line-height 為 normal , 並且 inline 元素的 vertical-align 仍然是 middle 垂直置中

網頁設計基礎課程目錄