# 2023-03-02 CSS
###### tags: `HTML` `CSS`
**一些零碎的知識**
Emmet wrap簡單用法: `ul > a*[href=... alt= ...]`
relative設定top時，父層高度沒有給確切數值是不能用%
fit-content數值`width: fit-content`可以自動調整寬度，但同時保留Block的特性
em是最大字的寬度 可能是M or W，ex小寫x的高度
## 自訂屬性

/* 自訂屬性 --作為開頭
 * 父層自訂屬性子層可以用，但子層自訂屬性父層不能用
 * :root的大家都可以用 */
:root {
  --custom-color: #fa0;
  --custom-margin: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  border: 1px solid #000;
  margin: var(--custom-margin);
}
.box2 {
  --custom-color: #af0;
  background-color: var(--custom-color);
}
.box3 {
  background-color: var(--custom-color);
}


## 寬高比例

.video {
  width: 30%;
  aspect-ratio: 16/9;
  background-color: var(--custom-color);
}

## transition

/* transition的控制時機不同 */
 .box {
  background-color: #ad0;
  height: 100px;
  width: 200px;
  transition: all 2s ease-out;
}
.box:hover {
  background-color: #f40;
  height: 150px;
  width: 400px;
  transition: all 0.1s ease-in;
}

## grid

.box {
  display: grid;
  gap: 10px;
  /* grid-template-columns: 200px 200px 200px; */
  /* grid-template-rows: 133px 133px 133px 200px; */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr) 200px;
  grid-template:...;
  grid-auto-flow: column;
  /* 格子空間的控制*/ 
  justify-content:...;
  align-content:...;
  place-content:...;
  /* 格子內子物件的對齊 */
  justify-items:...;
  align-items:...;
  place-items:...;
}
.item{
  grid-column-start:...;
  grid-column-end:...;
  grid-column:...;
  
  grid-row-start:...;
  grid-row-end:...;
  grid-row:...;
  
  grid-area:.../.../.../...;
  
  order:...;
  
  justify-self:...;
  align-self:...;
  plac-self:...;
}