---
title: Astro課程 0706 - CSS(Day3)
tags: astro, css, flexbox
---
# 0706 - CSS(Day3)
[FLEXBOX FROGGY](https://flexboxfroggy.com/#zh-tw)
[Flex屬性](https://wcc723.github.io/css/2017/07/21/css-flex/)
[[第六週] CSS - 跟著 🐸🐸 學 Flex 排版](https://yakimhsu.com/project/project_w6_CSS_flex.html)
## 時間軸
10:35 reset
10:55 link : 引入外部的css
11:35 box model
12:00 四種box
13:40 outline
13:55 flex
15:25 交叉軸
## CSS reset
所有瀏覽器都有預設值的css，但是各家瀏覽器頁面長得都不一樣
用`reset`覆寫後就會長得一樣
Amos推薦的reset檔：[Meyerweb](https://meyerweb.com/eric/tools/css/reset/)
CSS: 可以直接從這一份來改
```
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
```
業界通常使用另一個版本的css reset
[Normalize.css](https://necolas.github.io/normalize.css/latest/normalize.css): 把有差異的地方改成一樣，其他不動
`em`要重新換算成像素有點麻煩
所以不喜歡的地方可以自己修改
```
html {
line-height: 1; /* 原本是1.15 */
-webkit-text-size-adjust: 100%; /* 2 */
}
h1 {
font-size: 2em;
margin: 0; /* 原本是 0.67em 0; */
}
ul, ol {
outline: 1px solid #f00;
margin: 0 0 20px; /* 把margin統一設在下面*/
}
```
Q. 改了css，但是網頁沒有動，要怎麼辦？
1. 確認檔案是否正確 （瀏覽器頁面，按右鍵`檢查`）
2. 確認語法是否有套用 （檢查語法和優先權）註解掉可能有問題的行數
- `!important`是`屬性`的優先權，不是`選取器`的優先權
- 權重優先的`選取器`，使用瀏覽器檢查時，程式碼會出現在相對上方的位置
3. 也有可能是cache的問題
# box model
1. 佔據的空間（這個地方是我的）
`content + padding + border + margin`
2. 可見範圍（可見尺寸）
`content + padding + border`
(margin 沒有背景顏色)
四種box:
content box
padding box
border box
margin box
## `box-sizing` 控制寬跟高的作用對象
有兩種`box-sizing`的屬性：
`content-box` 往外加 (預設)
`border-box` 往內縮
```
div {
width: 200px;
/* 內容寬度 */
background-color: grey;
border: 5px solid red;
padding: 20px;
/* 內容以外的寬度 */
box-sizing: border-box;
/* 往內縮，content+padding = 200px */
/* margin: 25px; */
/* 和其他物件的距離 margin 不會有背景色 */
}
```
即時更新Responsive(響應式網站)快速鍵: `command` + `0`
英文：
文字強迫換行，英文字會被切一半 `word-break: break-all;`
依單字換行 `word-wrap:break-word;`
死都不換行 `white-space:nowrap;`
[Ref](https://www.puritys.me/docs-blog/article-31-CSS-%E8%AA%9E%E6%B3%95%EF%BC%8C%E6%96%87%E5%AD%97%E6%8F%9B%E8%A1%8C%EF%BC%8C%E5%BC%B7%E8%BF%AB%E4%B8%8D%E6%8F%9B%E8%A1%8C%E3%80%82.html)
```
<div>
word-break: break-word;
</div>
```
螢幕顯示為：
## outline 和 border的不同
box-sizing:outline不佔空間 (版面reset之後上方和右方的outline線條就不見了)
對畫面不會造成影響，可以拿來做檢查，看排版的位置
border會自己把自己加粗
`::` before [(偽元素)](https://ithelp.ithome.com.tw/articles/10222534)
`:` nth-child [(偽類)](https://ithelp.ithome.com.tw/articles/10227216)
# margin
`margin: auto` 把剩餘空間拿來做分配 （置中）
`margin-left: auto` 把剩餘空間拿給左側 （靠右）
有auto的地方就會拿到一份空間
# flex
對子層物件做橫排
## `justify-content` 主軸資料的走向 (main-axis)
（希伯來文和阿拉伯文是由右到左，其他大部分語言是由左到右）
`justify-content: flex-end` 對齊資料尾端
`justify-content: flex-start` 對齊資料起始端
## `flex-direction` 交叉軸 (cross-axis)
`flex-direction: row;` 預設
`flex-direction: row-reverse;`
`flex-direction: column;`
`flex-direction: column-reverse;`
## 分佈 （用`justify-content`做剩餘空間的分配）
`justify-content: space-between` 主軸的兩側
`justify-content: space-around` 主軸上每個物件的兩側
`justify-content: space-evenly` 完全均分
注意
* `justify-content`可以跟margin-left, margin-right搭配or使用
* `justify-content`在不換列的情況很好用，但是物件太多而需要換行時，我們可以把多餘的空間給父層padding往內縮進去
`(960- (400+20)*2 ) / 2 = 60`
所以設定左右padding為60px: `padding: 0 60px`
```
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 960px;
height: 1000px;
margin: auto;
display: flex;
/* outline: 10px solid red; */
padding: 0 60px;
flex-wrap: wrap;
/* 多個圖片換行 */
}
.item{
width: 400px;
margin: 10px;
/* flex-shrink: 0; */
/* 收縮的預設值是1，收進去到父層最大值 */
}
.item img{
width: 100%
}
</style>
```
注意：99%的版面壞掉，都是尺寸沒算對
## 彈性的列 `align-items`
多數的人不會在父層設定高度～所以會有彈性的列
（有剩餘的空間，拿來做分配）
`align-items: flex-start` (靠彈性列的首端)
`align-items: center` (在彈性列裡置中)
`align-items: flex-end` (靠彈性列的尾端)
這個語法類似在交叉軸上使用`space-around`的感覺
```
.box {
width: 1000px;
height: 1000px;
margin: auto;
background-color:lightgray;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
```
## 針對彈性的列上所有項目去做對齊`align-content`
決定行與行的之間距離有多遠
(控制彈性列的位置)
## "比讚"手勢
可以用"比讚"手勢來輔助辨識主軸/交叉軸、向上靠齊/向下靠齊
# flex語法總整理
* `flex-wrap`
* nowrap (預設)
* wrap
* wrap-reverse
* `flex-direction` 定義主軸的方向
* row
* row-reverse
* column
* column-reverse
* `flex-flow` : `flex-direction` 和 `flex-wrap`的縮寫
* `order` 決定元素的順序
* `justify-content` 將flex元素和主軸對齊
* flex-start
* flex-end
* center
* space-around
* space-even
* `align-items` 在交叉軸上對齊多個元素
* flex-start
* flex-end
* center
* baseline
* strech (預設)
* `align-self` 在交叉軸上對齊單一元素
* flex-start
* flex-end
* center
* baseline
* strech (預設)
* `align-content` 當交叉軸有多餘的空間，對齊容器內的軸線
* flex-start
* flex-end
* center
* space-around
* space-even
* strech (預設)
## 青蛙遊戲
青蛙第24關（大魔王關）
重點：使用`wrap-reverse`
解法：
```
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
```
## 設定 `萬用選取器 reset` 的Tab一鍵補完
1. 把要設定的語法寫在[Snippet](https://snippet-generator.app/)
例如：
```
* {
margin: 0;
padding: 0;
list-style: none;
}
```
產生一份給vscode的設定檔
```
"*": {
"prefix": "*",
"body": [
"* {",
" margin: 0;",
" padding: 0;",
" list-style: none;",
"}"
],
"description": "萬用選取器 reset"
}
```
2. VScode: `command` + `shift` + `p`
輸入關鍵字`snippet`，打開`preference`：設定`css.json`
把剛剛產生的Snippet檔貼入即可！
Sign in with Wallet
Connect another wallet