# 0330 錨點、Transform、RWD 基本介紹
###### tags: `HTML / CSS`

## code review
### Toyota 復刻
1. 讓高度 height 有彈性，不要寫死
- 現在的資料通常都是活資料，很容易造成資料跑出區塊範圍
3. 電商類型 ( 實務 ) 要注意：
- 間距
- 跨行
5. 蝦皮練習建議做多個，才能看出觸摸後是否會蓋住其他東西
6. class 不要用編號命名 ( e.g. sale2, wrap1, wrap2... )，工作時是大禁忌
7. 內文有多個項目時可使用 `ul` 跟 `li` 組合
8. 注意語意表達，不要只使用 div
9. 在做階層式選單的時候，要做一些偏移或提示目前選到的項目是哪一個
10. 算尺寸的時候會用尺把距離量出來再全部換成百分比
11. outline 不占空間，可以利用它加框線，方便查看位置
12. 在父層設定 padding 拉開距離，這樣即便再多層都不會被影響
13. 物件設了絕對定位 `position: absolute;` 後會自動轉型成 block，
- 建議補上 `display: block;` ，事後尺寸出現狀況尋找時方便抓問題
14. 與物件尺寸相關
- width, height, padding, margin, border
15. 影響尺寸計算方式
- `box-sizing`
- `transform: scale( )` 調整比例用，所占空間不會減少
- zoom( 較少使用 )
16. 預設的情況下，容器 ( 背景 ) 會被蓋住，內容 ( 文字、圖片 ) 不會被蓋住
---

### 問題：文字前面的紅點要怎麼做

1. 首行凸排 + 使用特殊符號 + scale

.main-txt p {
  padding-left: 1em;
  text-indent: -1em; /*首行縮排*/
}
.main-txt p::before {
  content: '■';
  color: red;
  text-indent: 0em; /*因為繼承的關係，所以要設定回來*/
  display: inline-block;
  transform: scale(.3);
}

2. 首行凸排 + 寬高應用 + scale (不使用特殊符號)

.main-txt p {
  padding-left: 0.7em; /* 跟著 ::before 的 width & height 做調整 */
  text-indent: -0.7em; /* 首行縮排 */
}
.main-txt p::before {
  content: '';
  width: 0.7em;
  height: 0.7em;
  background-color:#f00;
  text-indent: 0em; /* 因為繼承的關係，所以要設定回來 */
  display: inline-block;
  transform: scale(.2);
}

2-a. 第二點但使用自訂屬性

.main-txt{
  --my-indent: 0.7em; /*設定自訂屬性，作用範圍為容器內*/
}
.main-txt p {
  padding-left: var(--my-indent);
  text-indent: cal(cvar(--my-indent)*-1); /*首行縮排*/
}
.main-txt p::before {
  content: '';
  width:var(--my-indent);
  height:var(--my-indent);
  background-color:#f00;
  display: inline-block;
  transform: scale(.2);
}

3. 使用絕對定位（display: absolute;）

.main-txt p {
  position: relative;
  padding-left: 1em;
}
.main-txt p::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  left: 0.3em;
  top: 0.5em;
  background-color: #f00; 
}

3-a. 使用絕對定位但更換背景圖

.main-txt p {
  position: relative;
  padding-left: 1.4em;
}
.main-txt p::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0em;
  top: 0.2em;               
  background-image: url(圖片位置); /* ←可使用網路上圖片網址或是電腦裡的圖片路徑 */
  background-size: contain;
}

> 補充連結 :
> [Icon Finder](https://www.iconfinder.com)
> [background-size](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size)

---
## 自訂屬性
- 以 `--變數名稱: 值;` 設定變數
- 使用變數時寫上 `var(變數名稱)` 即可使用設定的值
- 變數運算：加上 `calc(var(變數名稱) 運算內容)`
- 範例：
- 設定變數：`--my-indent: 0.7em;`
- 使用變數：`padding-left: var(--my-indent);`
- 變數運算：`marging-left: calc(var(--my-indent) * -1);`
- 自訂屬性會有範圍的問題，若是在`.main`裡設定自訂屬性，在`.main`以外的區域無法使用
- 在容器外的無法使用，但是內層皆可以使用
- A 設定的自訂屬性 B 可以使用，B 設定的自訂屬性 A 不可以使用


---

## 錨點
* 單一頁面：使用 #號 + id 名稱 做錨點連結 ```<a href="#S1"> </a>```
* 跳頁做錨點 ```<a href="檔案名稱.html#s1>"```

    section{
        height: 50vh;
        font-size: 200px;
    }

    section:nth-of-type(1){ background-color: #fcc;}
    section:nth-of-type(2){ background-color: #cfc;}
    section:nth-of-type(3){ background-color: #ccf;}

<nav>
    <a href="#s1">section1</a>
    <a href="#s2">section2</a>
    <a href="#s3">section3</a>
</nav>
    
    <section id="s1">1</section>
    <section id="s2">2</section>
    <section id="s3">3</section>

---

## transform

>需要有block的屬性才有transform

transform: scale(x,y) skew(x,y) rotate(deg) translate(x,y)
            比例       傾斜 deg   旋轉        位移

* 位移方向會依照旋轉、斜向方法有變化（看物件自己的軸 )
* 軸向及起始位置會因順序、旋轉、傾斜及位移做調整
* translate 如用百分比，假設`translate(100%,0)` 會往自己的 x 軸移動100%
* skew，如傾斜 x 軸後， x 軸會變成斜的
* 先後順序會有影響
* `transform: scale(x,y)`，僅畫面顯示改變，本體所佔據的空間不會變
* 預設的中心點在正中間，設定中心點：

transform-origin:   /*基本有九個點，第十點由自己決定*/


* 屬性名稱相同的情況下，高優先權會==覆蓋==低優先權的值

> [Amos的翻牌影片](https://youtu.be/GScDZW_HUcw)
> [MDN的解釋](https://ubin.io/Xxsfky)
* 加上視角可產生 3D 效果，例：

transform: perspective(200px) rotateY(40deg);

類似效果如下

---
## RWD (Responsive Web Design 響應式網頁設計)

* 透過CSS，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠得到最佳的視覺效果，由於是由同一個網頁內容轉變，管理者也就不必大費周章的重複更新網頁資訊。

### 重點
### 1. 媒體查詢

@media screen and (條件){
    符合條件會執行的CSS
}

>min-width 是根據裝置的解析度
範例：min-width: 768px

主要螢幕斷點：
1. 768px 以上 - 平板直向（iPad）、平板橫向、桌機
2. 992px 以上 - 平板橫向（iPad 橫向為 1024px）、桌機
3. 1200px 以上 - 桌機、（iPad Pro 橫向 1366px）

768px 992px　　　 　1200px
－－－－＋－－－－－－＋－－－－－－－＋－－－－－－－

### 2. 尺寸換算成相對尺寸（百分比）
直接手算
### 3. 等比例區塊
用 `calc` 計算時，減號的前後==一定要有「空格」==

width: calc(100% / 3 - 30px);

### 4. 操作模式的差異
### 5. 格線系統
### 6. Bootstrap

>因各瀏覽器的精度標準不一樣，精度到小數位數六位會比較好

==建議：由小寫到大==
**看覆寫的狀況**
其實沒大沒小也很好（兩個直接分開寫）
但基本上還是要看工作狀況時先獲得大還是小的版型

---

## 小技巧

#### 網頁檢查
* shift + 下 -> 網頁檢查時每 10像素做調整
* 右方向鍵：展開；左方向鍵：找父層
* 使用開發者工具看原始碼