# 2023-03-01 CSS
###### tags: `HTML` `CSS`
## 作業會用到的元素

/* 製作幾何邊界 */
clip-path: polygon(x1 y1, x2 y2, x3 y3... );

/* 圖片在有限範圍內的切割 */
object-fit: cover;
object-position: x y;

/* flex補充 */
gap: row-margin , column-margin;
row-gap: ;
column-gap: ;

---
## ::before & ::after

/* 預設是inline，在該元素的裡面 */
p::before {
    content: "IamBefore";
    background-color: #ac0;
}
p::after {
    content: "IamAfter";
    background-color: #ea0;
}


## position
### relative:

/* relative為偏移顯示，所佔據的空間不變，參考位置為自身
 * 預設後方的relative元素會蓋住前方relative元素，除非有設定z-index
 * 內層的z-index會受限於外層z-index */
/* ...以上省略 */
.item:nth-child(15) {
    position: relative;
    /* 上下or左右同時出現，依據書寫方向決定效果*/
    top: 30px;
    left: 20px;
    /* 預設z-index為0     */
    z-index: 1;
}
/* ...以下省略 */
/* 補充：邏輯屬性是偏向語言書寫方向 */


### fixed:

/* fixed獨立出一層，寬度預設依據內容，參考空間是viewport可視範圍 
 * fixed物件是可以延伸的，還可以此作出換畫面的效果，但寬高確定就不會延伸
 * margin只有在左右、上下範圍確立後才有作用 
 * 物件會自動轉型成Block*/
.ad {
    position: fixed;
    height: 300px;
    width: 300px;
    /* left: 0px;
    right: 300px;
    top: 0;
    bottom: 20px; */
    /* 簡化為inset：上 右 下 左*/
    inset: 0 300px 0 20px;
    /* 範圍確定後margin就有用了 */
    margin: auto;
}

### absolute:

/* absolute獨立出一層，參考位置依據“有position的最近父層”的“padding-box” 
 * 父層都沒有position時，absolute只會定位在第一個viewport的範圍（會被捲走）
 * 物件會自動轉型成Block*/
.B {
    position: relative;
}
.C {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 80px;
    height: 40px;
}


### 另類三角形（很常用）

.arrow {
    height: 0;
    width: 0;
    border-top: 100px solid #00f;
    border-right: 100px solid #f000;
    border-bottom: 100px solid #fa0;
    border-left: 100px solid #0f00;
}