---
# System prepended metadata

title: 第一份測驗 (5題)

---

# 第一份測驗 (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處理，但會有多層巢狀，不好維護。