---
# System prepended metadata

title: Vscode亂碼問題/iframe/flexbox彈性盒子/容器container/物件items/overflow/駝峰式命名/使用者畫面可視區/命名原則
tags: [HTML]

---

###### 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/麥克風
