# T1切版重點
###### tags: `好想工作室`
2021.04.19（Mon.）
## 1. class 跟 div 之間的區別
> 節自：[Class和ID的差別在哪裡？](https://www.hacker543.com/class%E5%92%8Cid%E7%9A%84%E5%B7%AE%E5%88%A5%E5%9C%A8%E5%93%AA%E8%A3%A1%E6%83%B3%E6%88%90%E7%82%BA%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E4%BD%A0%E6%87%82%E4%BA%86%E5%97%8E/)
Class 跟 ID最大的不同，就在於 CSS的ID 選擇器在一個 HTML 文件中只能被使用一次，可是 Class 選擇器在一個 HTML 文件中可以被使用多次。
此外，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。
至於何時要用 ID 、何時要用 Class，並沒有絕對的規則。但是大多的時候，Class 選擇器的使用頻率較高，因為 Class 選擇器在一個 HTML 文件中，可以被使用多次。但是當你要用 Javascript 的 GetElementByID 函數時，你就應該要用 ID 選擇器。
## 2. HTML註解方式
利用`<!--`以及`-->`註解。
```htmlmixed=
<!--我是註解 -->
```
## 3. 將css匯入html中
在HTML檔案(.html)的外面寫一個CSS檔案(.css)
底下範例的 style.css 是寫好並且命名的css檔
```htmlmixed=
<head>
<link rel="stylesheet" href="style.css">
</head>
```
## 4. 網頁頂部有一條空白
在CSS的地方加上以下這段：
```css=
* {
padding:0 auto;
margin:0 auto;
}
```
## 5. vscode即時顯示畫面
先到vscode的extension（ctrl+shift+X），找"Live server"下載，就可以用了！至於使用方法就是進到檔案後，右下角有個"Go Live"，點下去就能使用了！
## 6. HTML清單
（A）**無序列表 (unordered lists) `<ul>`, `<li>`：**
```htmlmixed=
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
```
實際出來成果：
* first item
* second item
* third item
（A）**有序列表 (ordered lists) `<Ol>`, `<li>`：**
```htmlmixed=
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
```
實際出來成果：
1. first item
2. second item
3. third item
## 7. display: inline / inline-block / block
> 參考資料：[前端新手村 Block 和 Inline 排版](https://ithelp.ithome.com.tw/articles/10191740)
> 參考網頁：[CSS：Display](https://ithelp.ithome.com.tw/articles/10227414)
> 參考網頁：[display 屬性中常用的類別](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/display-%E5%B1%AC%E6%80%A7%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E9%A1%9E%E5%88%A5-77eb86714d8a
)
>參考網頁：[CSS 基本Display屬性](https://archerworkshop.info/cssdisplay/)
| 內容 | 說明 | 預設舉例 |
| ------ | ------------------------------------------------------ | ----------------------- |
| block | 可以設定高度（height）、寬度（width）、上方與下方距離，自動換行| div、p、ul、li |
| inline | 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度 | span、a、input、img、em |
| inline-block | 不會自動換行|img、input、select、button|
**display: block**
<font color="red">元素以區塊的方式呈現,簡單來說當不做其他CSS設定時,元素的寬會與父元素的同寬,在白話一點也就遇到block屬性的元素,其同層元素會換行顯示。</font>
* 可以指定 寬度(width) 和 高度(height)
* 可以設定上下左右外距(margin)
* 可以設定上下左右內距(padding)
* 元素會由上而下「自動換行配置」(若有另外設定 float 或 position 時例外)
* 無法設定垂直對齊(vertical-align)屬性，元素內容(文字)會永遠靠上對齊。但可以藉由 line-height 屬性解決文字內容垂直置中對齊的問題。
* 預設為此屬性的是區塊類型元素：div、ul、dl、p、h1~h6 …等
**display: inline**
<font color="red">元素與為inline並排顯示,其容器大小以內容物判定,無法設定寬高,上下外距等屬性</font>
* 「無法」指定寬度(width)和高度(height)，尺寸非固定會受 padding 值的影響
* 只能設定左右外距(margin-left & margin-right)，「無法設定上下外距(margin-top & margin-bottom)」
* 可以設定上下左右內距(padding)
* 元素「不會自動換行配置」，只要沒有使用 br 元素強制換行，會在同一列一直顯示至空間不足才會換到下一行
* 相鄰的文字(同一列中)和 inline 元素之間可以垂直置中對齊
* 再搭配設定行高(line-height)的情況下，可以指定與相鄰文字的垂直對齊(vertical-align)方式(※但不包括自身文字內容)
* 預設為此屬性的是文字類型元素：span、a、strong、small …等
**display: inline-block**
( 與 inline 一樣不會自動換行，但卻是以 block 元素盒子的方式顯示 )
<font color="red">排列方式以inline並排的方式呈現,但擁有block的屬性,可以設定寬高,上下外距等屬性</font>
* 可以指定 寬度(width) 和 高度(height)
* 可以設定上下左右外距(margin)
* 可以設定上下左右內距(padding)
* 元素「不會自動換行配置」，只要沒有使用 br 元素強制換行，會在同一列一直顯示至空間不足才會換到下一行
* 可在父元素設定 text-align 屬性，能指定區塊在父元素中的水平對齊方式
* 可以設定垂直對齊(vertical-align)屬性，指定垂直對齊的方式
* 預設為此屬性的類型元素有：img、input、select、button …等
## 8. display: table
>參考網頁：[使用 Display: table-cell 做網頁垂直置中](https://ithelp.ithome.com.tw/articles/10206524)
## 9. 兩色漸層按鈕
>參考網頁：[深入理解 CSS 漸層 ( CSS Gradient )](https://www.oxxostudio.tw/articles/202008/css-gradient.html)
（A）第一種：
```css=
background:linear-gradient(45deg, red 50%, black 50%);
```
（B）第二種：
```css=
background:linear-gradient( 90deg,
red 0%, red 15%,
orange 15%, orange 30%,
yellow 30%, yellow 45%,
green 45%, green 60%,
blue 60%, blue 75%,
indigo 75%, indigo 90%,
black 90%, black 100%);
```
## 10. 水平 / 垂直置中
>參考網頁：[[CSS] 水平置中與垂直置中(傳統作法)](https://blog.camel2243.com/2016/11/13/css-%E6%B0%B4%E5%B9%B3%E7%BD%AE%E4%B8%AD%E8%88%87%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD%E5%82%B3%E7%B5%B1%E4%BD%9C%E6%B3%95/)
Sign in with Wallet
Connect another wallet