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 行高 屬性
-
有 行高 的存在，與前後元素或是父元素會產生留白距離。
參看：相關行高的觀念與影響 (講義 1-5. 第5小節)
有 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 行高 屬性
-
有 行高 的存在，與前後元素或是父元素會產生留白距離。
參看：相關行高的觀念與影響 (講義 1-5. 第5小節)
有 inline 特性的元素才有 vertical-align 垂直對齊的需求。 - 有哪些元素？
-
img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......
接下來學習的重要提醒：
❶ 觀念要了解，功能的分類要清楚，至少記住編碼的關鍵字即可。
❷ 設計前要構思 (目標是？題目是？)
❸ 設計前擬腳本 (以中文儘量詳細地描述出要做些什麼？)
❹ 設計時大膽嘗試 (忘記沒關係，有明確的腳本即可搜尋獲得)
❺ 設計時隨時注重觀察 (多多利用 Chrome 的檢查面板)
區塊組成模式
區塊計算模式
