【CSS練習】IT修真院--練習1-九宮格

時間 2019-11-10

標籤 CSS練習練習九宮欄目 CSS 简体版

原文原文鏈接

九宮格——用html+css製做一個網頁

一. 目標效果：

二. 效果描述

圓角橙色九宮格，自適應頁面大小css

三. 開發計劃

1. 開發

[x] index.html建九個div.block
[x] app.css設定block大小顏色圓角橫排
[x] 尋找自適應方法html
- 重點：nginx
  - div大小隨屏幕變化
  - 令block的高度等於寬度
- [x] 猜測：block父級寬度跟隨屏幕變化，block始終爲父級30%左右git
  - [x] 方案一：Flex佈局github
    - 步驟:chrome
      1. 簡單分三行div.wrap(display:flex)，各帶三個div.block(flex:1)，寬度自適應成功
      2. 將div.block高度自適應寬度,根據這篇文章padding-top百分比值參考容器寬度，能夠嘗試使用padding-top來爲div.block頂出高度，可是這種寫法div.block的margin只能很小，不然在小屏幕上會變成長方形小程序
        
        效果：已實現
        
        代碼：見div.container-flex
        
        特色：flex對移動設備適配好
      3. 步驟2中margin只能用很小數值的處理，根據任務要求最終的頁面應該是九宮格，方塊和方塊間有間隔，方塊和容器也有間隔，因此橫縱的設計應該是用湊100%容器寬度的方法,按照這個設計來使用百分比,使用first-child & last-child僞類來完善佈局.效果以下：
        segmentfault
        
        margin(1%) + 方塊(32%) + margin(1%) + 方塊(32%) + margin(1%) + 方塊(32%) + margin(1%) = 100%
        
        margin(4%) + 方塊(28%) + margin(4%) + 方塊(28%) + margin(4%) + 方塊(28%) + margin(4%) = 100%
  - [x] 方案二：Flex佈局2windows
    - 步驟：微信小程序
      1. 方案一用了flex，可是那種用flex:1以前還要把div分三行再均等分，還要額外作margin處理，煩透. 學習阮一峯-Flex語法篇後，嘗試div.wrap使用默認橫排flex & flex換行 & justify-content:space-around, div.block設定百分比寬度，輕鬆實現目標效果：
[x] Chrome自適應效果調試
[x] 裝Node.js開http-server開端口給手機看

2. 完成任務以後

[x] A. 驗收標準
1. [x] 還原設計圖
  - [x] 圓角：10%
  - [x] 顏色：換windows取色,#FFA600
  - [x] 設計圖：基本一致
2. [x] 自適應：寬度無滾動條，格子隨窗體變化
3. [x] 移動端：Chrome響應式測試和真機均經過
4. [x] 編碼規範
  - [x] UTF-8: <meta>的charset默認UTF-8
  - [x] 標籤小寫 & 閉合
  - [x] 元素屬性值已用雙引號包含
  - [x] css外聯引用
  - [x] css不用id控制樣式
  - [x] 用div實現佈局
[x] B.深度思考
1. Doctype做用：聲明解析器
2. 盒模型理解：用東西放在盒子中來類比元素在網頁中的顯示效果。
  - content: 物品，存儲於海綿(padding)的包裹中，並由箱子(border)包裝;
  - padding: 類比用來包裹貴重物品的海綿，最靠近物品(content)，在箱子(border)裏面;
  - border: 箱子。箱子大小厚度可調整，箱子會被物品(content)及其海綿(padding)撐大;
  - margin: 箱子要求與其餘東西保持的距離，處於最外層;
3. display:
  - inline:
    - 行內元素，文本元素通常都是，兩個inline元素連續寫，其顯示效果不換行;
    - 修改width & height無效，能夠經過修改line-height來改變高度，內容撐開寬度;
    - 代碼換行被解析爲空格
    - 不支持樣式：width&height、text-align、background-position、clear
  - block:
    - 塊狀元素，div是其表明。一個塊狀元素會新開始一行並儘量撐滿容器;
    - 可經過修改width & height 來修改寬高;
    - 不支持樣式：
      - vertical-align
  - inline-block：
    - 行內塊元素，兼具block和inline特性,可經過修改width&height來修改寬高,且不獨佔一行;
    - 代碼換行被解析爲空格
  - none: 在不刪除元素的狀況下show|hide元素;
4. 使用瀏覽器的F12調試界面方法【調試】chrome谷歌瀏覽器-DevTool開發者工具-詳細總結
  - Element：查看界面元素，可查看元素的對應css樣式、計算後樣式、事件監聽器、屬性.
  - Console: 控制檯。用於顯示日誌信息及輸入一些命令.
  - Network：請求監聽。可得到請求列表，點開某一項將看到Headers、Preview、Response、Timing數據.
    - Headers: 頭部數據。包含General、Response Heaeder、Request Headers
      - General：本次請求的URL、請求方法、狀態碼、請求服務器的地址、其餘一些設置.
      - Response Headers: 響應頭部.
      - Request Headers: 包含用戶代理User-Agent，幫服務器識別設備用.
    - Preview：預覽。若是是圖片html將直接顯示界面，若是是數據則以其格式優化後展現，若是是代碼則直接展現.
    - Response: 響應結果原始數據.
    - Cookies(有些有)：請求用到的cookies.
    - Timing: 請求時間使用狀況.
  - Sources: 看代碼 & 開斷點.
  - Performance: 網頁加載時記錄狀況, 幀數、CPU資源，據此可提出性能優化點;
  - Memory: 分析開銷大的js函數
  - Application: 應用資源面板。存儲LocalStroage、Session、Cookies等.
  - Security: 網頁安全狀況.
5. 九宮格佈局其餘方法實現及其優劣
  - 九宮格佈局在 CSS 中，用 float 和 position 的區別是什麼？
    - float:
      - 優勢：瀏覽器兼容性好
      - 缺點：不是一種真正的佈局方式。比較trick, 問題也比較多(移動端)
    - 當前使用的flex佈局：
      - 優勢：flex是真正的佈局方式。移動設備友好，微信小程序也用flex作佈局
      - 缺點：瀏覽器兼容性(支持IE10+)
  - block正方形化移動端佈局，div按比例佈局，寬度爲百分比，但又想讓高度和寬度同樣，即讓div爲正方形，怎麼作佈局呢？
    - vw & vh: 移動設備兼容性存在問題
    - 當前使用的padding-top：簡單，兼容性好
6. IDE意思 & 與文本編輯器的對比（後者被前者集成）
  - IDE(Integrated Development Environment)即集成開發環境，提供程序開發環境，通常集成了代碼編輯器、編譯器、調試器以及圖形化用戶界面。具備豐富的工具和流暢的開發體驗。
  - 文本編輯器：單純進行編輯用的應用。代碼型的通常具備插件擴展功能。
7. 加不加<meta>的viewport的區別 Responsive Web Design - The Viewport
  - 加<meta>的viewport:
    - width=device-width 將會一直幫你根據屏幕寬度設置界面寬度
    - initial-scale=1.0 將會在瀏覽器首次加載頁面的時候幫你設置好頁面縮放比例
  - 不加：
    - 不管什麼設備顯示效果都是同樣的，移動設備上的頁面可能會被等比例縮小到看不清