一個常見的手機端頁面開發

完成的事

1. bananer圖的設置：背景圖片的設置，背景的模糊化和其餘效果
2. 頁首頁腳固定，中間內容滑動的佈局。overflow-y的使用
3. 豎槓，橫槓的控制
4. 利用float佈局圖文混排
5. flex佈局的使用。flex語法
6. 大致瞭解了下css代碼規範css編碼規範

解決的問題

1. 之前一直覺得只有塊級元素才能使用盒子模型，其實行內元素也能夠，能夠用來畫豎槓，垂直居中等等。
2. 中間頁面沒法滑動的問題，是由於中間頁面未獨立於固定定位的頁面，使固定定位的元素覆蓋了其內容，沒法出現滾動條。能夠考慮使用相對定位使中間內容獨立出來
3. 縮放擴展頁面，頁面小於內容，內容溢出，頁面過大，顯示頁面再也不擴張，能夠考慮給父容器使用min-width和設置width：100%

仍有的困惑

1. flex佈局仍未了解透徹，flex:1,inline-flex只知其一;不知其二，考慮在之後的學習中不斷提升認識。
2. rem是怎麼實現自適應的，rem是相對根元素字體大小的單位，根元素字體大小能夠隨頁面自適應嗎？
3. vw,vh的應用有些麻煩
4. nginx網頁能夠經過電腦訪問，但不能經過手機訪問了，之前還行

開發步驟

1. html骨架構建，header main footer
2. html細節構建，考慮各元素的位置，是否垂直/水平居中，橫槓豎槓，考慮用什麼標籤實現，仍是套個父容器。應當優先考慮帶有語義化的標籤，class命名也也要易懂，專業。
3. css總體構建，去除元素自帶的樣式，設置好根元素的字體大小，

4. css細節構建

   • 瞭解浮動的影響，浮動有利於圖文混排，可是會破壞文檔流
   • 瞭解定位的做用，優點大於浮動，不會破壞文檔流，能夠覆蓋或被覆蓋在元素上。定位主要是位置距離不太好控制。
   • 瞭解flex佈局，flex佈局有利於彈性變化，有利於一行排列，缺點暫且沒發現