###### tags: `HTML`

# Vscode亂碼問題/iframe/flexbox彈性盒子/容器container/物件items/overflow/駝峰式命名/使用者畫面可視區/命名原則
- 22/4/27~28-HTML

# Vscode亂碼問題
- txt => big5
vscode => utf-8
因編碼不同 產生亂碼

1. 選取檔案 文檔.txt
2. vscode 右下角 選取編碼utf-8
3. 上方>以編碼重新開啟
4. 選擇Big5

# iframe
1. index.html->iframe->於內新增name:myMain

2. index.html->aside->某a標籤->於內新增target:myMain
會將1設置的name連結到2設置的target, 兩者之間的橋樑為myMain

3. 於框框內返回首頁
在其它a連結新增 target:_top , 避免畫面重複而切割

4. iframe name myMain 這裡的name填寫的myMain是自訂名稱

# flexbox 彈性盒子
flexbox基本架構

外部容器container + 內部物件items

flexbox架構
o 一整組 : 外部容器 + 很多內部物件
X 一整組 : 僅有外部容器
X 一整組 : 僅有內部物件

# 容器 container
1. display : flex 宣告為外框(容器), 預設主軸 row

2. flex-direction : 設定主軸 ( row / column )

3. flex-wrap : wrap 換行
假設container為1000, items為300, 顯示的items最多就三個,
第四個items因為空間缺200而被擠去下一行
(若超過三個items,未設定wrap會縮小wrap的大小硬塞進一個container)

4. flex-flow = flex-direction + flex-wrap
*例 : flex-flow : row wrap;

5. justify-content 依主軸方向設置 分配 物件位置

6. align-items 設定物件位置(上中下),預設:填滿

7. align-content 用於多組時排列

# 物件 items

1. order 依照給予的參數 調整物件排列順序
<pre>
< div style="order: 2">A< /div>
< div style="order: 1">B< /div>
</pre>
顯示 BA

3. flex-grow
4. flex-shrink
5. flex-basis 依照主軸 個別設定參數 (row對應width / column對應height)

<pre>
< div>1< /div>
< div>2< /div>
< div style="flex-basis:200px">3< /div>
< div>4< /div>
</pre>
6. flex
7. align-self

---

# 2022-04-28

# overflow

1. overflow : hidden 內容大於格子時,隱藏格子之外的內容
2.
3.

- iframe 要在 css 內設定 width height 設定100%
可以讓iframe正常 完全顯示

- 可以參考w3schools css overflow 幫助理解
https://www.w3schools.com/css/css_overflow.asp

# 駝峰式命名
資料型態
變數名或函式名是由一個或多個單字連結在一起，而構成的唯一識別字時，
第一個單字以小寫字母開始；第二個單字的首字母大寫或每一個單字的首字母都採用大寫字母
提高辨識閱讀率

# 使用者畫面可視區
min-height 或 < br>*N 多一頁

*例: min-height: 100vh; (可視區百分比100)

- vh (viewport height) 使用者畫面 可視區 高度 百分比
- vw (viewport width) 使用者畫面 可視區 寬度 百分比

w 1920px 固定絕對值
w 1440px 固定絕對值

- container -> align-items 調整整體區塊
- item -> align-self 調整個別區塊

# 命名原則
1. 用於資料庫運作時 不分大小寫 myArr my-test

2. 大寫開頭用於 物件導向OOP class/全域變數

3. 使用英文字開頭 後面可以加底線 或 數字
禁止數字 或 符號開頭
不要中文 也不要注音英文 如: a94dk4z/麥克風