# css
https://www.youtube.com/watch?v=pKO1ktPQByk
https://www.youtube.com/watch?v=0gayskscLY4
最好用firbox 他的開發工具很適合css

很多教學
https://juejin.cn/post/6844903926110617613

## 圖片變形
要max-width 超過限制
height 100% 這邊就限制100%高度就好
另外 url裡面也可以調整大小

但左右都寫死會變形
所以最好用裁切的
上面是背景 下面是圖片
position是裁切的位置

## 橫縱比

## display gird
可以自動排 然後大小

## 垂直置中
https://www.youtube.com/watch?v=njdJeu95p6s
https://www.youtube.com/watch?v=87YMCtsBoCM
前面兩個flex跟translate就不說了

**新用法**
place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性)

## 下拉選單
https://www.youtube.com/watch?v=S-VeYcOCFZw

## scrollbar
https://www.youtube.com/watch?v=v_8CmC6cwUs

## float 要clear
https://www.youtube.com/watch?v=r7o4t4MGBVU

## 製中方法

文字
**text-center**
line-height 跟父層一樣
margin 0

父曾跟line-height用變數 好維護

但缺點換行會炸

定位的新用法
inset: 0
margin: auto

但最好還是用flex 跟 grid

## 骨架加載動畫 文章之類的介面必用
https://www.youtube.com/watch?v=ZVug65gW-fc

## RWD簡單方法

## calc真正用法
calc重點是能計算不同單位的

## 下拉選單的focus
https://www.youtube.com/watch?v=Qhaz36TZG5Y
button使用 button:focus展開下面選單，這時點擊下拉選單會沒辦法focus,就要用到js，但其實有更好的方法，button:focus-width

## 重複修改的用變數
原本

改成

## Neumorphic (軟ui)(blur都比前兩個參數 距離還大一點點)(左上基本上都#ffff)
重點
border-radius 要有
background-color跟底色一樣

keyword
用光暗去做更動
先右下角 第一排的順序(x , y ,模糊blur ,顏色)
第二排左上角(跟上面一樣)

box-shadow: 13px 13px 20px hsl(200, 12%, 55%),
                    -13px -13px 20px #ffffff; 


### img
第一層是讓他變厚
第二層是有框
第三第四做陰影

 .logo {
            background-image: url('./123.jpg');
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow:
                /* logo shadow */
                0px 0px 2px #5f5f5f,
                /* offset 圓線條變粗  用來擋下面陰影*/
                0px 0px 0px 5px #ecf0f3,
                /*bottom right */
                8px 8px 15px #a7aaaf,
                /* top left */
                -8px -8px 15px #ffffff;
        }

### input外面的div 用陰影
要往內漲陰影

 box-shadow: inset 8px 8px 8px #a7aaaf,
             inset -8px -8px 8px #ffffff;

## 要刪除的原生

**input**

border: none;
outline: none;
background: none;

**button**

border: none;
outline: none;

記得加上

font-weight: 900; 或變胖
cursor: pointer;
 text-align: center;

**a標籤**
` text-decoration: none;`
## 可拖移 放大放小
resize: both;
可加上
overflow隱藏多的
跟min max - midth
保證他不會縮到變形

## 設定大小 可用在圖片 div ...幾乎全部(注意支援程度偏低)
不用再padding把她變大了
可用 aspect-ration = 幾成幾
ex aspect-ration= 1/1
with = 100px
這就等於 100*100
## 文字後面放圖片跟視頻

https://www.youtube.com/watch?v=X6tTBxEmZCE

## 專於css變數用 js調整
用calc(var()*1px)
而不是ex js30 的方法 放在dataset再取

## sticky遇到的上面文字會被覆蓋
請下 scroll-padding-top
注意 scroll的數字要跟 sticky的height一樣

## 使用 CSS 小技巧幫按鈕加上 tooltip
data-tooltip
取值得話是 attr(data-tooltip)

## 有序無序清單 ul li ol li
多層情況

正常情況

用 is去判斷
:is(ul, ol) :is(ul, ol) li

## 幫相同標籤做計時器
在body下 counter-reset = heading 設置計時器
在標籤的:before下 用委元素是因為不要影響到原本的 可用 counter(heading)去顯示數字
counter-increment = heading 累積次數

最實用的 ul li 想看清楚不是重新歸零
用 counter-increment = outline再委元素
記得外面要下 counter-reset = outline
!! 注意顯示時用counters 要加s會重製 !!

## 超好用方法 解決 間距問題
平常方法

注意有些移動端不支持 但有80趴了
flex需要兼具 不用再mr 然後最後一個加回來
可以直接用gap:10px 去給他間距

## 簡單色盤


## 設置min max大小時 border不會一起變大變小
使用clamp (最小 我們的視角 最大)

## 簡單測試瀏覽器支不支援
@supports

## 非常實用 自動幫客戶在滑鼠放下時會吸到最近的 這樣不會讓庫戶看到一半的東西
容器scroll-snap-type，子元素scroll-snap-align

最好在html 跟 body都下 因為瀏覽器不同可能會有問題
scroll-snap
## 之後一定會改的 padding之類的只會跟從區塊不會跟文字
讓他可以跟文字一樣 像flex-dir 一樣改變
請用下面的

## rem en

rem 的R 是road 會隨父層字改動

## position 記得除了relative用來定位，其他的都要給top.. 四個方向隨便一個值 ex top 0

relative 一樣可以top left 但不會這樣用

fixed **不會去看relative 他只會看html，但記得要top 0**
注意 fixed他會蓋到裡面文字 因為她fixed脫離文擋了

sticky **不會去看relative 他只會看html，但記得要top 0**
特效 進階版
a->b->c->d 因為sticky會覆蓋

## display

inline-block跟 inline差別
inline-block它用在圖片 他能給寬高

## 關於顏色
使用hsl
比較好挑顏色
很多都會用到hsl 像canvas的strokeStyle就會用到

## Grid
https://cssgridgarden.com/

grid-template-columns 衡的
grid-template-rows 直

如果你是

 grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;

然後寫
grid-column-start:6 他只會到五而已

**start end**
裡面的要排就用
grid-column-start and grid-column-end
start:1 end:3
這樣會從一到四 (end -1)

但你如果
start:5 end:2
這樣會1到4 (兩個都剪一)

**可以縮寫
start:1 end:3
改成
grid-column: 1 / 3**

**span**(只能正值)

ex
`grid-column-start: 1;
grid-column-end: span 2;`
當你end沒寫位子 就代表跟start一樣的位置
像這答案1~2 你可以直接看end是多少 就佔多少。

**grid-area**
接受以斜杠分隔的四個值：grid-row-start, grid-column-start, grid-row-end, 後跟grid-column-end

ex grid-area: 1 / 1 / 3 / 6;

**order**

有 0 -1 1 按照順序排
預設0

**repeat**
grid-template-columns:repeat(8,12.5%)
意思 8個 12.5%

**fr**
grid-template-columns:1fr 5fr
1/6 6/5

如果和 px em 之類混和用 fr會分剩下的

**grid-template**
grid-template-rows和的速記屬性grid-template-columns。

例如，grid-template: 50% 50% / 200px;將創建一個網格，其中兩行各佔 50%，一列寬 200 像素。

## 繼承
當文字有自定或 預設 可以用 inherit繼承
像下面的 p 的border繼承div 然後button文字格式繼承
body的 對於button很好用
(記得 繼承是網上找有設定的 所以你沒設定她會一直找到body)

## 拋棄預設css
像按鈕一樣會有自訂的文字
unset會拋棄預設

**如果要拋棄所有預設樣式**
**不用把她甚麼boder 背景歸零之類的**
用
all:unset

## transform屬性
注意transform如果要連續用，要放在一起ex
`transform: rotate(30px) scale(0.75)`

**rotate**
單位
deg
turn (如果你要轉75度 就寫0.25turn)

**scale**

scale() 如果傳入一個參數xy一樣，兩個的話前面x後面y

**translate**

除了基本的px
單位可以用%(%是自己的，所以可以用來置中)

skew(傾斜)

## width最小值
用width:min(90%, 70.5rem)
這樣比較好

## img
最好設置最大值 max-width
max-width要生效記得display用block

## flex裡面容器大小

可以用 flex-basis 100% 這樣裡面可以對分
也可以用別的方法

## 動畫
https://www.youtube.com/watch?v=YszONjKpgg4
**記得放在 被移動的人生下(child)**

有兩個
簡單的跟進階
transition (花費時間, 貝斯曲線, 延遲) animation (名字, 貝斯曲線, 花費時間, 向前向後, 次數, 延遲)

animation開關

可用animation-play-state:paused
###### tags: `CSS`