# 第一份測驗 (5題)

1. 筆試 - 若講到 css box-model，是否有含 border、font-size、padding？
答案：
* padding 是 box model 的內邊距
* border 是 box model 的邊框
* margin 是 box model 的外邊距
* font-size 不是

2. 筆試 - 請寫出 var、const、let 的差異
答案：
* const 一般使用在變數不會被重新指定值
* let 一般使用在變數可能會被重新指定值
* var 使用在變數可能或不會被重新賦予值，或者宣告範圍在整個函式(function)或者區塊(block)中

3. 筆試 - 請描述如果要做出一個 Modal、light 燈箱效果，簡易用文字描述你會如何透過 CSS、JS 整合開發？
答案：
* 加入 lightbox 套件 ，先去官網取得 cdn，再下載其範例，然後邊看 github 邊操作。

4. 上機考 - 請列舉至少三個能夠達成水平與垂直置中的 CSS 作法
答案：
* 傳統
* line-height+單行文字：運用設定文字行高，會在其正中央位置
* line-height+多行文字：同上概念，被要垂直置中的元素用 div 包起來，並設置 inline-block
* Absolute + margin 負值(調整位置用)
* Absolute + translate：絕對位置 + 百分比調整
* flex
* 兩層 div 包夾，父層下 display:flex、align-items: center
* 兩層 div 包夾，父層下 display:flex，子層下 margin:auto 0
* 兩層 div 包夾，父層下 display:flex，子層下 align-self: center

5. 筆試 - 請描述何謂 AJAX 非同步，以及你習慣如何實踐？
答案：
* 可以使網頁與伺服器進行非同步更新，不需要重新載入網頁的技術。較舊的PHP網站，可能有區域資料變動，就需要重新向伺服器請求，並在伺服器端重新渲染HTML，再由瀏覽器接收新的HTML造成頁面刷新，但是更改的區域又很小，造成不必要的資源浪費，AJAX則資料皆在客戶端處理，不需要刷新頁面，即可更新DOM。
* 目前沒有處理過非同步排序問題，但可以透過Promise處理。或是用callback function處理，但會有多層巢狀，不好維護。