文字
對齊方式 text-align
CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。
- left 把文字排列到左邊。預設值：由瀏覽器決定。
- right 把文字排列到右邊。
- center 把文字排列到中間。
- justify 實現兩端對齊文字效果。
- inherit 規定應該從父元素繼承 text-align 屬性的值。
h1{
text-align: center;
}
行高 line-height
CSS 屬性用於設定多行元素的空間量，如多行文字的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。對於非替代的 inline 元素，它用於計算行盒（line box）的高度。
行高可用與對文字進行豎直居中，當行高與塊的高度相同時
.mydiv{
text-align: center;
background-color: aquamarine;
font-size: 50px;
line-height: 200px;
height: 200px;
}
補充：長度單位
vh、vw在實際開發中使用較多
縮排 text-indent
text-indent屬效能定義一個塊元素首行文字內容之前的縮排量。一般使用em為單位
.mydiv{
font-size: 20px;
text-indent: 2em;
}
文字的修飾線外觀 text-decoration
案例：去除超連結預設自帶的下劃線
a{
text-decoration:none;
}
text-decoration: none; /*沒有文字裝飾*/
text-decoration: underline red; /*紅色下劃線*/
text-decoration: underline wavy red; /*紅色波浪形下劃線*/
陰影 text-shadow
text-shadow為文字新增陰影。可以為文字與 text-decorations 新增多個陰影，陰影值之間用逗號隔開。每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成。
p:nth-child(1){
text-shadow: 5px 5px 1px gold,
5px -5px 2px red;
}
字型
大小 font-size
font-size CSS 屬性指定字型的大小。因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。
樣式 font-style
font-style CSS 屬性允許你選擇 font-family 字型下的 italic 或 oblique 樣式。
加粗 font-weight
font-weight CSS 屬性指定了字型的粗細程度。 一些字型只提供 normal 和 bold 兩種值。
字型 font-family
背景
background-color
CSS屬性中的background-color會設定元素的背景色, 屬性的值為顏色值或關鍵字”transparent”二者選其一。
background-image
CSS background-image 屬性用於為一個元素設定一個或者多個背景影像。
漸變色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))
background-size
background-size 設定背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
cover是一定用圖片覆蓋div
contain 是圖片不能超div
background-position
為背景圖片設定初始位置。
background-attachment
CSS 屬性決定背景影像的位置是在視口內固定，或者隨著包含它的區塊滾動。
邊框
邊框樣式 border-style
border-style 是一個 CSS 簡寫屬性，用來設定元素所有邊框的樣式。
border-style: solid dotted dashed outset;
/* top | right | bottom | left */
border-style: dashed;
/* Apply to all four sides */
/* horizontal | vertical */
border-style: dotted solid;
/* top | horizontal | bottom */
border-style: hidden double dashed;
邊框寬度 border-width
border-width屬性可以設定盒子模型的邊框寬度。
/* 頂部 | 右側 | 底部 | 左側 */
border-width: 1px 2em 0 4rem;
邊框顏色 border-color
CSS屬性border-color 是一個用於設定元素四個邊框顏色的快捷屬性： border-top-color, border-right-color, border-bottom-color, border-left-color
邊框角半徑 border-radius
CSS 屬性 border-radius 允許你設定元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
該屬性是一個 簡寫屬性，是為了將這四個屬性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 簡寫為一個屬性。
border-radius: 50%;
/*半徑為邊長的一半，此時邊框是圓形*/
表格邊框是否緊鄰 border-collapse
border-collapse CSS 屬性是用來決定表格的邊框是分開的還是合併的。在分隔模式下，相鄰的單元格都擁有獨立的邊框。在合併模式下，相鄰單元格共享邊框。
td{
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
}
table{
border-style: solid;
border-collapse: collapse;
border-width: 10px;
}
元素展示格式
display屬性
block 塊級 div預設為塊級
- 獨佔一行
- width、height、margin、padding均可控制
- width預設100%
inline 行級 span預設為行級
- 可以共佔一行
- width與height無效，水平方向的margin與padding有效，豎直方向的margin與padding無效
- width預設為本身內容寬度
inline-block img預設
- 可以共佔一行
- width、height、margin、padding均可控制
- width預設為本身內容寬度
white-space空白處理
white-space CSS 屬性是用來設定如何處理元素中的 空白 (en-US)。
overflow + text-overflow 處理未顯示的溢位內容
overflow 是 CSS 的簡寫屬性，其設定了元素溢位時所需的行為——即當元素的內容太大而無法適應它的區塊格式化上下文時。它是 overflow-x 和overflow-y的 簡寫屬性 。
示例：滾動視窗顯示溢位內容
div{
width: 100px;
height: 100px;
background-color: lightblue;
overflow: scroll;
}
示例：用省略號表示橫向溢位內容
div{
width: 100px;
height: 100px;
background-color: lightblue;
white-space: nowrap;
overflow:hidden;/*超出內容隱藏*/
text-overflow: ellipsis;/*用一個省略號來表示被截斷的文字，只對橫向超出起作用*/
}
問題搜尋教學
如何豎直居中一個位於div中的img?
Google搜尋 Stack Overflow
div{
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
}
img{
width: 100px;
position: relative;
top: 50%;
transform: translateY(-50%);
}