---
# System prepended metadata

title: 0324 偽元素、三角形、圓角、定位、選取器
tags: [HTML / CSS]

---

# 0324 偽元素、三角形、圓角、定位、選取器
###### tags: `HTML / CSS`

## 偽元素
- ::before & ::after 是 inline 元素
- 在『\<p>』裡，內容的前後
```css=
p{
    background-color: #ccc;
 }
p::before{
    content: "before";
 }
p::after{
    content: "after";
}
/* ------------------------- */
<body>
    <p>偽元素</p>
</body>
```
顯示為：![](https://i.imgur.com/3mJCJDG.png =150x)

- 需要搭配 “content” 才可以使用，否則不存在
  - content可以搭配“空內容”
- 通常用來做裝飾性的東西（沒有語意）
- 使用偽元素製作三角形
```css=
p::before{
            content: ""; /*空內容*/
            display: inline-block; 
            /*調整寬高使用inline-block*/
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-left:  8px solid rgb(61, 61, 151);
            border-bottom:  8px  solid transparent;
            vertical-align: middle;
        }
```
顯示為：![](https://i.imgur.com/s4AEVFu.png =100x)

---

## 應用邊框線製成三角形
四個邊框線，中間是由斜角對接
```css=
.arrow{
            width: 50px;
            height: 50px;
            border-top: 40px solid #faa;
            border-left: 40px solid #afa;
            border-right:  40px solid #aaf;
            border-bottom: 40px solid yellow;
        }
```
![](https://i.imgur.com/euLTxl0.png =100x)
- 將 div 寬高設為 0
```css=
.arrow {
            width: 0px;
            height: 0px;
            border-top: 40px solid #faa;
            border-left: 40px solid #afa;
            border-right:  40px solid #aaf;
            border-bottom: 40px solid yellow;
        }
```
![](https://i.imgur.com/yt9AyLa.png =100x)
- 利用邊框線特性做出三角形
  - 斜邊是由兩條相連的邊框線所組成，其中一條拿掉，斜邊會(如下圖：拿掉 top 邊框線，上面的斜角就會消失，變成直角三角形）
  - 使用透明色達到效果
  - 可使用田字格來判斷需要哪邊的邊界
![](https://i.imgur.com/ForSQxT.png =150x150)

```css=
        .arrow1{
            width: 0px;
            height: 0px;
            /* border-top: 40px solid transparent; */
            border-left: 40px solid #faa;
            border-right:  40px solid #aaf;
            border-bottom: 40px solid #afa;
        }
        .arrow2{
            width: 0px;
            height: 0px;
            border-top: 40px solid transparent;
            border-left: 40px solid #faa;
            border-right:  40px solid #aaf;
            border-bottom: 40px solid #afa;
        }
```
  ![](https://i.imgur.com/IqSpFgf.png =100x)

![](https://i.imgur.com/zNxjCN7.png =100x)
  - arrow1拿掉border-top，比較arrow2，白色部分消失，粉色跟紫色的部分因斜角消失，只剩下一半



```css=
        .arrow {
            width: 0px;
            height: 0px;
            border-top: 40px solid transparent;
            border-left: 40px solid transparent;
            border-right:  40px solid #aaf;
            border-bottom: 40px solid transparent;
        }
```
![](https://i.imgur.com/70AiOt8.png =80x)





---

## 定位
依據畫面中的位置做定位
- static：所有定位效果回歸於零
- ==**relative**==：相對定位
  - 相對原本位置做偏移
  - 依舊佔據原本的空間
  - 給予上下左右值（參考原本位置），偏移顯示
    - left: 自原本位置左側移動的距離
    - top: 自原本位置上方移動的距離
```css=
li:nth-child(23){
            background-color: tomato;
            position: relative;
            left: 50px;
            top: 50px;
        }
```
![](https://i.imgur.com/ua33TNH.png =200x)
  #### 圖層的先後順序 z-index
    - 所有物件的 z-index 都預設為0
    - z-index 數字越大層級越上面
    - 後方原始碼蓋住前方原始碼
    - 有定位層級的物件 > 無定位層級
    - 有 z-index 的高於沒有 z-index
  🍎 ***前後順序決定關係: z-index > postion > 原始碼出現先後*** 
```css=
 li:nth-child(23){
            background-color: tomato;
            position: relative;
            left: 50px;
            top: 50px;
        }
        li:nth-child(24){
            z-index: 2;
        }
```
  ![](https://i.imgur.com/MIiaDbP.png =200x)

  
- ==**fixed**==: 
  - 自己獨立一層（上浮）
  - 離**視窗**目前位置上方及左側多遠，就是預設距離(固定在畫面上：e.g.網頁上的選單導覽列、回到最上方之類的)
    - 若預設位置在視窗之外（捲軸下拉），就找不到他了
  - 定位位置為視窗，所以上下左右是與視窗的距離
```css=
.box{
        width: 100px;
        height: 100px;
        background-color: tomato;
        font-size: 50px;
        position: fixed;
        bottom:0px;
        left:0px;
        }
```
![](https://i.imgur.com/KF58YtX.png =150x)
  - 由於fixed是定位視窗，須給予上下左右值才能計算margin值的分配
```css=
.box{
            width: 100px;
            height: 100px;
            background-color: tomato;
            font-size: 50px;
            position: fixed;
            /*給予上下左右值，才能計算margin值的分配*/
            bottom:0px;
            left:0px;
            top: 0px;
            right: 50%;
            margin: auto;
        }
```
範例：
到畫面寬度25%的中線：畫面寬度右側50%，剩餘50%使用margin auto取得中線位置
![](https://i.imgur.com/NKA4LJn.png)

- ==**absolute**==
  - 自己獨立一層（上浮）
  - 預設在原本的位置，如本來不在視窗內依然能透過捲動看見
  - 上下左右是依照**上一層**的定位：
    - 上一層 b 層（圖一）
    - 上上一 a 層(圖二)
    - body 層(圖三)
    - html 層(圖四)
    - 瀏覽器：*在第一個視窗內（第一個視窗畫面），可被捲走* （若上幾層都沒有定位，通常就是預設位置）
![](https://i.imgur.com/GgJMLWf.png)

**＊層級：視窗-> html -> body -> a -> b**
- sticky
- [ ] - https://ithelp.ithome.com.tw/articles/10241079
根據 MDN 上的說明，sticky element 不會脫離原本的排版流，跟 relative 有點像，但是會黏在最近的 "scrolling ancestor" 上。


---

#### CSS選取器＋號
- 跟在後面的那一個
```css=
.box + p{
            color: blue;
        }
```
![](https://i.imgur.com/75t2aK1.png =200x)

---
#### 選取器 ~
- 跟在物件後面的所有同類型物件
```css=
h1 ~ p{
color: red;
}
```
![](https://i.imgur.com/tKBScga.png =300x)

---
#### 選取器 > 
- 選取下一層
```css=
.box, .box div{
            border: 4px solid red;
            padding: 40px;
            background-color: #ccc;
        }
        .box > div{
            background-color: #faa;
        }
/*-----------*/
<div class="box">
    <div>
        <div></div>
    </div>
</div>
```
![](https://i.imgur.com/Poqmsre.png =150x)
使用範例：
導覽列選單下一層、的下一層
- [ ] 觀看影片：網頁切版教學：013-015側邊選單
- [ ] https://www.youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo
##### 導覽選單
- 巢狀結構
- 不可能用a再包a
- li裡面放a
- 第二層：li裡面再放ul>li
```css=
nav > ul{
        display: flex;
    }
    nav ul ul{
        display: none;
        position: absolute;
    }
    nav >ul Li:hover ul{
        display: block;
    }
    nav a{
        display: block;
        padding: 10px 20px;
        border: 1px solid red;
    }
```
![](https://i.imgur.com/tPiH7lT.png =200x)

加分隔線（不使用邊框線）
邊框線問題：包含連結，碰到會點到連結
```css=
nav a{
   display: block;
   padding: 10px 20px;
   /* border: 1px solid red; */
    }
nav li{
    position: relative;
    }
nav > ul linav > ul li + li::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 1em;
    width: 1px;
    background-color: red;
    }
```
![](https://i.imgur.com/M0jTQ3f.png =200x)


---
## overflow
各家瀏覽器捲軸有些在html有些在body
```css=
html body{
overflow:hidden;
/*捲軸就隱藏，無法往下捲*/
}
```
內容超出範圍：
- 預設visible:超出範圍
- hidden: 隱藏起來
- scroll: 出現卷軸
  - windows上會強迫出現卷軸（上下左右，不論有沒有需要）
  ![](https://i.imgur.com/iqmRDWu.png =200x)
  - Mac有捲軸但隱藏起來
- auto: 自動判斷要不要捲軸
- 
*應用：圖片容器：
- 若圖片非正方形，做圓角50%時，會變成長橢圓形
![](https://i.imgur.com/XZlMLJX.png =100x)

- 所以使用外容器50%圓角＋overflow hidden，做出不管圖型大小如何的造型
```css=
.pic{
            width: 200px;
            height: 200px;
            border: 4px solid red;
            border-radius: 50%;
            overflow: hidden;
        }
        .pic img{
            /* border-radius: 50%; */
        }
```
![](https://i.imgur.com/vAIxEew.png =100x)

---
## CSS選取器

#### +
選同一層的後面一個
- 使用範例：選單中間的分隔線
- ![](https://i.imgur.com/uPGItTE.png =200x)

方法一: 使用＋
```css=
nav a{
       padding: 0 20px;
     }
nav a + a{
       border-left: 1px solid reb;
        } 
```
方法二：使用first/last-child
```css=
nav a{
      padding: 0 20px;
      border-right: red 1px solid;
     }
nav a:last-child{
      border-right: none;
     }
```
方法三：使用::not(:first-child)
```css=
nav a{
     padding: 0 20px;
     border-right: red 1px solid;
     }
nav a::not(:first-child){
        border-right: 1px solid red;
     }
```

---

### child: 順序的重要性 （從後面看過去）
==其實 child 不是 child，而是兄弟的概念。==
==要看**結構**：從父層來看，不是爺爺層(上上層)來看==
==如有相連的兩個條件，要從後面的先解讀，再往前符合條件==
==空白代表往下一層==
==如使用 + ~ > 這三種符號則前後的空白沒作用==
```css=
.box span:first-child{
background-color:red;
}
/*指第一個box內的子物件，且須符合span這個形態*/
/* span 與 :first-child 相連，先解讀後者。 */
```
同時具備才會被選到↑
```css=
:first-child /*第一個子物件*/
:first-of-type  /*第一個類型*/

:last-child /*最後一個子物件*/
:last-of-type /*最後一個類型子物件*/

:nth-child() /*第Ｎ個子物件*/
:nth-of-type() /*第Ｎ個類型的子物件*/

:nth-last-child() /*倒數第Ｎ個子物件*/
:nth-last-of-type() /*倒數第Ｎ個類型的子物件*/

```
```css=
.list :nth-child(3) span{
            background-color: red;
        }
```
![](https://i.imgur.com/Ca7KdKj.png =50x)

```css=
        .list :nth-child(3){
            color: red;}
        /* class="list"的下一層中第三個物件 */
        
        .list li:nth-child(3){
            color: red;}
        /* class="list"的下一層中第三個物件且要是 li 標籤 */
        
        .list span:nth-child(3){
            color: red;}
        /* class="list"的下一層中第三個物件且要是 span 標籤 */
        
        .list :nth-child(3) span{
            color: red;} 
        /* 此為正確答案 */
        /* class="list"的下一層中第三個物件的下一層中的 span 標籤 */
```

#### :nth-child(an+b) 
＊固定公式(CSS內建函式)
a,b為變數，可帶入
- a = 每 a 個跳一次
- n = 瀏覽器會自動 n=0, n=1, n=2... 一路加上去
- b = 前後位移個數
- 如果值為負數或是超出現有個數，就不會套用
- (-an+b) = 從第 b 個開始往前方跳，一次跳 a 個


範例：
```css=
ul :nth-child(n+5):nth-last-child(n+4){
            background-color: red;
        }
```
![](https://i.imgur.com/Q5aSBuo.png =200x)


---
### 圓角
border-radius: 順序 左上->右上->右下->左上 (從左上開始順時針排列)

解釋時間=> 16:47 
#### egg 蛋形
將圓角寫成八個值
![](https://i.imgur.com/YRmfdHI.png =200x)

```css=
border-radius: Ax Bx Cx Dx /  Ay By Cy Dy;
```
**相連的直徑相加要小於100，否則爆出**
|border-radius:| A B C D | /|  A B C D;|
|--|--|--|--|
|  |X軸|==斜線為必要判斷XY軸==|Y軸|

![](https://i.imgur.com/hfWLfYI.png =100x)
```css=
border-radius: 50% / 60% 60% 40% 40%;
background-image: linear-gradient(90deg, blue 0%, #faa 100%);
            /* 漸層色 */
```



