# CSS 整理 (待補充)
> 本文為「Lidemy」上的課程學習練習筆記，內容參考課程內容、同學的整理筆記，搭配其他網站補充，重新整理消化吸收，僅做自我學習使用，如有錯誤或忘了附上參考資料歡迎糾正指教，非常感謝。

## 參考資料

1. [Lidemy 程式導師實驗計畫第四期影片](https://bootcamp.lidemy.com/)
2. [INTERNETING IS HARD](https://www.internetingishard.com/)
3. [HTML語法整理! 3分鐘快速弄懂常用語法！](https://www.happycoding.today/posts/27)
4. [HTML Sematic Tags: Should I Bother With Semantic HTML?](https://www.jungledisk.com/blog/2017/12/04/should-i-bother-with-semantic-html/)
5. [金魚都能懂 網頁設計入門](https://ithelp.ithome.com.tw/articles/10202562)
6. [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
7. [前端基礎 - HTML & SEO](https://hackmd.io/ff_zXfEzRLmMiEiVV5wAEw) by 第四屆 ruofan
8. [前端基礎 - CSS](https://hackmd.io/Ux1ekWR2Qv20q036vNpV3g?both) by 第四屆 ruofan
9. [前端基礎：CSS selector](https://medium.com/@hugh_Program_learning_diary_Js/前端基礎-css-selector-4b62158fd3db?source=---------20------------------) by 第三屆 hugh
10. [前端基礎：CSS 的各種裝飾](https://medium.com/@hugh_Program_learning_diary_Js/前端基礎-css-的各種裝飾-b0e51f46e3f7?source=---------19------------------) by 第三屆 hugh
11. [前端基礎：CSS 盒模型（box model）](https://medium.com/@hugh_Program_learning_diary_Js/前端基礎-css-盒模型-box-model-1b977df8d3d0?source=---------18------------------) by 第三屆 hugh

# CSS 展示 - Display

1. 元素與相鄰元素怎麼排
2. 元素內部元素怎麼排

| | block | inline | inline-block |
| -------- | ------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| | 會佔據整行，盡可能撐滿整個元素，由上到下自動換行 | 併排，都在同一列，相鄰的排一起。<br />不能調寬高、上下邊距也不能調。<br />沒有內容就沒有體積。 | 對外像 inline 可以併排<br />對內像 block 可以調整各種屬性(寬高、邊距) |
| 預設元素 | div, h1~h6, p, … | 行內元素<br />span, a (超連結用) | buttom, input, select… |

> 補充：圖片跟著元素比較好開發，可放在 background image，background size 調成 cover，才不會壓縮到圖片的比例。

> 補充：圓角如果沒有顯示出來的原因是因為圖片本身超過限制，需要補上 overflow: hidden 才會看出原本設定的圓角效果

> 補充：新的單位 rem ，代表全網的基礎字體大小為基礎，看需要的大小是基礎的幾倍。em 的畫則是母元素的字體大小為基礎，但是有點難想，因為每個母元素都不一樣。


參考資料：[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)

Case 1 - inline 調 margin

可以發現到只有 margin 的左右有變動。會這樣的主要原因是，以 span 屬性來說，我們也不需要去變動寬高度，跟上下的邊距，所以不會很難記憶這樣的特性。


Case 2 - inline 調 padding

雖然不會影響其他的元素，但是會有不一樣的反應。


# CSS Flex


## .flex container：

- display
- flex
- inline-flex

**flex-flow 排列**

- flex-direction 主軸方向
row 左到右(預設)| row-reverse 右到左| column 上到下| column-reverse 下到上


- flex-wrap
超出範圍時是否換行的屬性，分為
換行 (wrap)、不換行 (nowrap)、換行時反轉 (wrap-reverse) 第一行在最下面的感覺

- justify-content
主軸 (main axis) 的對齊設定
flex-start 靠左 (預設) | flex-end 靠右 | center 置中 | space-between | space-around

- align-items
交錯軸 (cross axis) 的對齊設定
flex-start 靠上 (預設) | flex-end 靠下 | center 置中 | baseline (文字對齊)| stretch

> `stretch` 在高度被限制的情況下不會正常伸展。

- align-content
是 align-items 的多行版本
flex-start | flex-end | center | space-between | space-around | stretch

> justify-content & align-item & align-content 會跟著 flex-direction 改變
>
> 

## .flex item：

- flex
- flex-grow
元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 `0`，如果設置為 0 則不會縮放。
- flex-shrink
元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 `0`，如果設置為 0 則不會縮放。
- flex-basis
元件的基準值，可使用不同的單位值。
- order
這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。
- align-self
可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。

### flex-direction


可點擊 Edit on Codepen 自己玩看看更了解：

<iframe name="cp_embed_1" src="https://codepen.io/Wcc723/embed/yXdVXz?height=381&amp;theme-id=0&amp;slug-hash=yXdVXz&amp;default-tab=css%2Cresult&amp;user=Wcc723&amp;embed-version=2&amp;pen-title=Flex%20%E4%BB%8B%E7%B4%B9%20(flex-direction)&amp;name=cp_embed_1" scrolling="no" frameborder="0" height="381" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Flex 介紹 (flex-direction)" class="cp_embed_iframe " loading="lazy" id="cp_embed_yXdVXz" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 21px; vertical-align: baseline; width: 909px; overflow: hidden; display: block;"></iframe>

### flex-wrap


<iframe name="cp_embed_2" src="https://codepen.io/Wcc723/embed/xroRaB?height=378&amp;theme-id=0&amp;slug-hash=xroRaB&amp;default-tab=css%2Cresult&amp;user=Wcc723&amp;embed-version=2&amp;pen-title=Flex%20%E4%BB%8B%E7%B4%B9%20(flex-wrap)&amp;name=cp_embed_2" scrolling="no" frameborder="0" height="378" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Flex 介紹 (flex-wrap)" class="cp_embed_iframe " loading="lazy" id="cp_embed_xroRaB" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 21px; vertical-align: baseline; width: 909px; overflow: hidden; display: block;"></iframe>

### justify-content


### align-items


試試看

<iframe name="cp_embed_3" src="https://codepen.io/Wcc723/embed/VWJPaa?height=381&amp;theme-id=0&amp;slug-hash=VWJPaa&amp;default-tab=css%2Cresult&amp;user=Wcc723&amp;embed-version=2&amp;pen-title=Flex%20%E4%BB%8B%E7%B4%B9%20(flex-justify)&amp;name=cp_embed_3" scrolling="no" frameborder="0" height="381" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Flex 介紹 (flex-justify)" class="cp_embed_iframe " loading="lazy" id="cp_embed_VWJPaa" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 21px; vertical-align: baseline; width: 909px; overflow: hidden; display: block;"></iframe>

### align-content


<iframe name="cp_embed_4" src="https://codepen.io/Wcc723/embed/JJQEOY?height=375&amp;theme-id=0&amp;slug-hash=JJQEOY&amp;default-tab=css%2Cresult&amp;user=Wcc723&amp;embed-version=2&amp;pen-title=Flex%20%E4%BB%8B%E7%B4%B9%20(align-content)&amp;name=cp_embed_4" scrolling="no" frameborder="0" height="375" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Flex 介紹 (align-content)" class="cp_embed_iframe " loading="lazy" id="cp_embed_JJQEOY" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 21px; vertical-align: baseline; width: 909px; overflow: hidden; display: block;"></iframe>

#
# CSS 定位 - Position

用在排版元素的位置，讓元素出現在應該出現的位置就會需要各種定位的方法來輔助。

| Static | Relative | Fixed | Absolute |
| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
| 不跳脫排版流的預設定位 | 不跳脫排版流，以原本位置做為原點來相對移動 | 跳脫排版流，以視窗作為原點來移動 | 跳脫排版流，以特定元素作為原點來移動 |
|  |  |  |  |

> Absolute 絕對定位必須要有個**參考點**，否則就會用 body 做為參考點。
> 參考點的設置就是以設置 absolute 的位置往上找**不是 static 的元素**，做為參考點。
>