---
# System prepended metadata

title: css
tags: [CSS]

---

#  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裡面也可以調整大小

但左右都寫死會變形
所以最好用裁切的
上面是背景 下面是圖片
![](https://i.imgur.com/QLndX21.jpg)
position是裁切的位置

## 橫縱比
![](https://i.imgur.com/KXqHVbu.png)


## display gird
可以自動排 然後大小
![](https://i.imgur.com/G5sBW49.png)


## 垂直置中
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://i.imgur.com/9fI6skl.png)

## 下拉選單
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
![](https://i.imgur.com/bgbzR2W.png)


但最好還是用flex 跟 grid

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


## RWD簡單方法
![](https://i.imgur.com/m85uZOf.png)

## calc真正用法
calc重點是能計算不同單位的
![](https://i.imgur.com/Pbi0z8c.png)

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


## 重複修改的用變數
原本
![](https://i.imgur.com/K34ALZy.png)

改成
![](https://i.imgur.com/c1LJHvG.png)

## 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; 
```
![](https://i.imgur.com/2yVi9BL.png)

### img
第一層是讓他變厚
第二層是有框
第三第四做陰影
![](https://i.imgur.com/6ViLrGn.png)


```
 .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
 保證他不會縮到變形
![](https://i.imgur.com/BCE5V2t.png)

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

https://www.youtube.com/watch?v=X6tTBxEmZCE
![](https://i.imgur.com/s38AjBO.png)


## 專於css變數用 js調整
用calc(var()*1px)
 而不是ex js30 的方法 放在dataset再取
![](https://i.imgur.com/2r9ZKUK.png)

## sticky遇到的上面文字會被覆蓋
請下 scroll-padding-top
注意 scroll的數字要跟 sticky的height一樣
![](https://i.imgur.com/ybbt9t8.jpg)

## 使用 CSS 小技巧幫按鈕加上 tooltip
data-tooltip
取值得話是 attr(data-tooltip)
![](https://i.imgur.com/jUIgkLC.png)

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

正常情況
![](https://i.imgur.com/NAWbpz7.png)

用 is去判斷
:is(ul, ol) :is(ul, ol) li
![](https://i.imgur.com/M6JsV2O.png)

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

最實用的 ul li 想看清楚不是重新歸零
用 counter-increment = outline再委元素
記得外面要下 counter-reset = outline
!!  注意顯示時用counters 要加s會重製 !!
![](https://i.imgur.com/awsV9TW.png)

## 超好用方法 解決  間距問題 
平常方法
![](https://i.imgur.com/RGxhn0G.png)

注意有些移動端不支持 但有80趴了
flex需要兼具 不用再mr 然後最後一個加回來
可以直接用gap:10px 去給他間距
![](https://i.imgur.com/qHpNaRk.png)


## 簡單色盤

![](https://i.imgur.com/zTicc9B.png)


## 設置min max大小時 border不會一起變大變小
使用clamp (最小 我們的視角 最大)
 ![](https://i.imgur.com/MW6s9Kk.png)

## 簡單測試瀏覽器支不支援
 @supports
![](https://i.imgur.com/v3kTtCb.png)

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

最好在html 跟 body都下 因為瀏覽器不同可能會有問題
scroll-snap
![](https://i.imgur.com/vVQqtmw.png)
## 之後一定會改的 padding之類的只會跟從區塊不會跟文字
讓他可以跟文字一樣 像flex-dir 一樣改變 
請用下面的
![](https://i.imgur.com/NXNFLeZ.png)


## 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**
![](https://i.imgur.com/BbQFyRH.jpg)
特效 進階版
a->b->c->d 因為sticky會覆蓋  
![](https://i.imgur.com/WHt8XqF.png)


## display

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


## 關於顏色
使用hsl
比較好挑顏色 
很多都會用到hsl  像canvas的strokeStyle就會用到
![](https://i.imgur.com/snToqkV.png)

## 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)
![](https://i.imgur.com/q5NleLo.png)

## 拋棄預設css
像按鈕一樣會有自訂的文字
unset會拋棄預設
![](https://i.imgur.com/4nFLD7e.png)

**如果要拋棄所有預設樣式**
**不用把她甚麼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(傾斜)
![](https://i.imgur.com/I9QKjb1.png)


## 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`

