【CSS練習】IT修真院--練習5-護工我的界面

時間 2019-11-10

標籤 CSS練習練習我的界面欄目 CSS 简体版

原文原文鏈接

任務5、一個最多見的移動端頁面

完成的事情

float學習css
- 張鑫旭《CSS世界》相關章節
- 張鑫旭 float系列
瞭解CSS通配符 & 選擇器性能優化/瀏覽器渲染原理
background學習(各屬性及效果)
完成任務五
學習CSS編碼規範CSS編碼規範, 並按照編碼規範優化代碼
完成深度思考

計劃的事情

[ ] 找時間把前面任務的官方提供連接過一遍，查缺補漏
[ ] 深度思考：手機分辨率和網頁px的區別(TODO:週末補學)html
- link1
- link2
- link3

遇到的問題

[ ] IE10下自我介紹一行右側沒法自動自動換行(flex).
[ ] 不清楚圖片效果的實現方式，可能須要瞭解如下圖片用了什麼處理再找編碼對策

收穫

1、任務五計劃及開發

明確效果：目標是開發一個屏幕自適應的護工我的主頁，最終效果以下：
開發步驟前端
- 截取效果圖 & 經過PSD中獲取資源圖 & 獲取header底色#5fc0cd、價格顏色#e26163
- 界面組成分析：css3
  - header： header用display:fixed，左側後退+居中title，可用float或absolute解決. 爲了實現灰色半透明層效果需加多一層div.transparent
  - main: 按照上節的學習爲了防止移動端fixed出Bug，main也用position:absolute而後再在main中使用一個div.content來承載內容並支持滾動.git
    - info: 定高，圖片作背景，左邊圖片浮動並設置margin,右邊用overflow:hidden清除浮動完成定位.
    - skill: title欄左border，condition欄使用flex左靠，接下來都用flex包含label+span來完成
  - footer: footer用display:fixed, 兩個btn高度不變自適應屏幕寬度可用flex解決,爲了保證伸縮3個margin不變故margin用rem寫.
- 效果對比：
對比優化github
- 學習背景圖知識並嘗試實現背景圖效果segmentfault
  - 完成background學習
  - 學習了fliter屬性，不過只是將圖像模糊化並調整了亮度，爲此將本來的文字及圖片abosulte開來, 而後本來的背景也改爲用div.bg來實現模糊&亮度的修改.
  - 順便修繕了下location，使其支持多行地點文字佈局不變形.
- 技能高度每行都減小
- 底部button高度提升,並取消縱向margin
- footer加入padding

2、CSS及瀏覽器部分探究

float學習參考：張鑫旭《CSS世界》

學習總結後端
- float本質: 本質是爲了實現文字環繞效果. 所以在界面佈局方面只是簡單堆疊的話會形成彈性缺失.
- float特性瀏覽器
  - 包裹性： "包裹" + "自適應性"性能優化
    - 包裹：float元素的子元素若是寬度更小，則float元素寬度將表現爲其子元素寬度
    - 自適應性：float元素的子元素旁如有文字，則將自適應爲子元素+文字寬度(非連續長串英文狀況下，最大寬度爲float元素寬度)
  - 塊狀化並格式化上下文：若float屬性值不爲none，則其display計算值爲block或者table.
  - 破壞文檔流（文字環繞圖片效果實現原理）:
    - 場景描述：場景代碼以下，img可添加float:left屬性觸發文字環繞效果，p元素爲塊狀盒子，可能被分爲多行，每行的文字都處於一個內聯盒子中.
```
<div class="father">
  <img src="xx">
</div>
<p class="animal">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
```
    - 讓父元素高度塌陷：讓跟隨的內容(文字)能夠和浮動元素(圖片)在一個水平線上
    - 行框盒子和浮動元素的不可重疊性：
      - 行框盒子(每行內聯元素所在的盒子)被float限制故和浮動元素(圖片)徹底不重疊，且永遠沒法經過CSS改變大小.
      - 塊狀盒子(內聯元素上級盒子)與浮動元素(圖片)徹底重疊，
- 抗浮動
  - 結合任務四的header佈局實現實例，有三種方案能夠先讓兩個<a>標籤左右float，再對<h1>設置text-align:center; & 設置抗浮動:
    - margin法: 設置<h1>左右margin值超過<a>標籤寬度;(此方法支持"驗收標準-擴展性要求")
    - clear法: 設置<h1>的僞類:after{clear:both};
    - overflow法：設置<h1> overflow:hidden;

CSS通配符

觀點：
- 查詢次數多&匹配效率低，會影響性能可是影響不大
- 影響可維護性 & 容易形成樣式衝突
- 全部須要設置的元素放在一塊兒設置
- 建議使用css reset文件
  - necolas/normalize.css
  - jgthms/minireset.css

選擇器性能優化參考：網站CSS選擇器性能討論
- 樣式系統從最右的選擇符開始向左進行匹配規則，只要左邊還有選擇符就會繼續向左移動.
- CSS選擇器效率排序(快到慢)：
  - id選擇器（#myid）
  - 類選擇器（.myclassname）
  - 標籤選擇器（div,h1,p）
  - 相鄰選擇器（h1+p）
  - 子選擇器（ul < li）
  - 後代選擇器（li a）
  - 通配符選擇器（*）
  - 屬性選擇器（a[rel=」external」]）
  - 僞類選擇器（a:hover,li:nth-child）
- 優化方法：
  - id選擇器最快，不要同時使用其餘選擇器
  - 類選擇器儘可能不合標籤選擇器同時用
  - 明確DOM結構狀況下優先使用子選擇器
  - 使用類選擇器替代後代選擇器&子選擇器
  - 儘可能用繼承避免編寫重複樣式
瀏覽器渲染原理
- 參考：
  - 前端必讀：瀏覽器內部工做原理
  - 瀏覽器的渲染：過程與原理
- A 網頁加載耗時分佈：
  - DNS查詢
  - TCP鏈接
  - HTTP請求及響應
  - 服務器響應
  - 客戶端渲染(瀏覽器渲染)
- B 渲染引擎
  - Geoko： Firefox(新版用Quantum)
  - Webkit: Safari & Chrome
  - Trident： IE
  - Edge: Edge
- C 渲染流程:
  - 1) 解析html構建DOM樹：將標籤轉化爲內容樹的DOM節點
  - 2) 構建render樹：解析外部CSS及style標誌中的樣式信息，用以構建render樹. render樹由一些包含顏色和大小等屬性的矩形(??)組成，他們將被按照正確順序顯示到屏幕上.(CSS->CSSOM樹，DOM+CSSOM樹->render樹)
  - 3) 佈局render樹：肯定每一個節點在屏幕上的確切座標
  - 4) 繪製render樹：遍歷render樹，並使用UI後端層繪製每一個節點
  - Tip：以上過程是逐步完成的，爲了更好的用戶體驗渲染引擎將會盡量早地呈現內容，也就是邊解析邊顯示.
- 渲染優化知識點
  - 關鍵渲染路徑：與當前用戶操做有關的內容，即用戶打開網頁時首屏的顯示.具體到瀏覽器就是HTML&CSS&JS等資源的接收及處理後渲染出頁面.瞭解的目的就是爲了優化，優化須要針對具體問題，好比保證首屏內容的最快顯示,能夠推出PWA也就是漸進式頁面渲染，由此能夠再推到資源拆分、場景策略等.
  - CSS & JS加載：
    - Tip
      - CSS會阻塞渲染直至CSSOM構建完畢
      - 穿插在HTML中的script標籤將阻塞HTML解析
      - JS的defer&async
        
        對inline-script無效
        
        defer用於延遲執行引入而且不阻塞HTML解析.待整個文檔解析完畢後執行defer的JS，最後觸發DOMContentLoaded事件.
        
        async用於異步引入JS，若是已經加載好就會開始執行,可是執行順序不肯定.
    - 優化方法：
      - 優先引入CSS，JS儘可能少影響DOM的構建
      - 實際工程中常常將JS放到文檔底部</body>前(非框架文件)

3、background學習

定義：用於定義HTML元素的背景.
屬性：
- background-color: 背景色
  - 設定方式：
    - 十六進制： #ff0000
    - RGB: rgb(255, 0, 0)
    - 顏色名稱: red
    - RGBA(???)
    - 透明：transparent
    - inherit：繼承父元素背景色
- background-image: 背景圖像(默認平鋪重複)
  - 設定方式： url('[path]')
- background-repeat:
  - 水平平鋪：repeat-x
  - 垂直平鋪: repeat-y
  - 不平鋪：no-repeat
- background-attachment：是否隨頁面滾動
  - scroll: 跟隨頁面滾動
  - fixed：跟隨進度條位置
  - inherit: 繼承自父元素
- background-position: 設置背景圖像的起始位置(Firefox和Opera須要先設置爲fixed才能正常工做)
  - 設定方式：
    - top|center|bottom(垂直) left|center|right(水平)
    - x%(水平) y%(垂直)
    - xpos(水平) ypos(垂直)
- background-origin: 相對位置
  - 值：padding-box|border-box|content-box
- background-size: 背景圖片大小
  - 值： length(寬度,高度)|percentage(寬度,高度)|cover(保持縱橫比並縮放成徹底覆蓋背景定位區域的最大大小)|contain(保持縱橫比並縮放成合適背景定位區域的最大大小，即只知足短的方向的等比例縮放)

3、深度思考

1.css能夠繪製哪些常見的特殊形狀？

參考：
- 奇妙的 CSS shapes(CSS圖形)
- The Shapes of CSS

梯形、三角形、六邊形、圓形、心型、五角星...
SharpsDemo演示

2.如何理解vertical-align與line-height？

參考：
- 深刻理解line-height與vertical-align
- CSS深刻理解vertical-align和line-height的基友關係
line-height: 行高.隻影響inline元素及內容.
- 可選值：<length>|<percentage>|<number>|normal|inherit
- 默認值：normal(一般是font-size的1.2倍)
- 內容區：行內文本，font-size決定了其高度;
- 行內框：等於行間距(上半)+內容區+行間距(下半)，line-height決定了其高度;當font-size>line-height時行內框小於內容區;
- 行框：行內的最高行內框頂端到最低行內款底端的距離,且各行框頂端挨着上一行框的底端;
- 框屬性：
  - padding、border、margin的top&bottom都不影響行高（行框高度）, 其left&right都會應用到元素的開始結尾;
  - 行內元素的邊框邊界由font-size控制而非line-height;
- 行內替換元素：根據元素的標籤屬性來決定其顯示的具體內容的元素，如<img> & <input>. 其位於基線(vertical-align:bashline)上, 替換元素的基線是正常流中最後一個行框的基線，除非元素內容爲空或者自己的overflow屬性值不是visible，這種狀況下基線是marigin底邊緣.
vertical-align
- 可選值：
  - 關鍵字值： baseline|sub|super|text-top|text-bottom|middle|top|bottom
  - 長度值：??em|??px
  - 百分比值：?% (vertical-align的百分比相對於line-height進行計算)
  - 全局值：inherit|initial|unset
- 默認值：baseline
關係
- 對於內聯元素各類想得通或者想不通的行爲表現，基本上均可以用vertical-align和line-height來解釋，以及進行行爲矯正
- vertical-align的百分比相對於line-height進行計算
學習演示地址

3.請解釋一下CSS3的Flexbox（彈性盒佈局模型）以及適用場景？

Flex佈局用於簡潔、完整、響應式地實現各類頁面佈局，給盒模型提供最大的靈活性. 採用Flex佈局的元素稱爲Flex容器(flex container), 其全部子元素自動成爲容器成員即Flex項目(flex item). 容器默認存在兩根軸，水平的主軸(main axis)和交叉軸(cross axis),Flex項目默認沿主軸排列.
適用場景：
- 網格佈局：設置flex
- 百分比佈局：先設置flex:1, 再設置flex: 0 0 %
- 聖盃佈局: 該填滿的用flex:1
- 輸入框佈局：一側定長，其餘flex:1填滿
- 懸掛式佈局：一側定長，其餘flex:1填滿
- 固定底欄：方向column，定高
- 流式佈局: 參考任務一

4.title與h一、b與strong、i與em、img的alt與title、src與href有什麼區別參考：Web品質

<title> & <h1>: <title>用於描述網頁內容且整個文檔中只出現一次，在搜索引擎列表、窗口標題欄、用戶書籤中可見，應儘可能短且具備描述性; <h1>用於描述網頁中最頂層的標題,符合語義化;
<b> & <strong>: <b>爲無心義的加粗，如今的Web標準不建議直接元素設計具體表現形式,故建議少用; <strong>表更強的強調，能夠用CSS替換其加粗樣式，比較符合Web標準;
<i> & <em>: <i>爲無心義的斜體，如今的Web標準不建議直接元素設計具體表現形式,故建議少用; <em>表示通常強調，能夠用CSS替換其斜體樣式，比較符合Web標準;
<img>的alt & title屬性、src & href屬性：
- alt：沒法顯示圖片時起到文本替代的做用, 瀏覽器在特殊瀏覽器上有輔助做用;
- title: 鼠標劃過期的文本提示;
- src：資源對應路徑，將資源加載到文檔中;
- href：指向的連接，不加載資源;

5.如何使用IconFont？參考：IconFont使用

unicode引用：
- 使用：拷貝字體到項目而後加入font-face, css定義iconfont樣式, 選擇圖標及字體編碼應用於頁面;
- 特色：兼容性好(IE6+);支持按字體方式動態調整圖標大小顏色;不支持多色;
font-class引用：
- 使用：拷貝fontclass代碼，直接選圖標並在應用上應用類名;
- 解決問題：解決unicode書寫不直觀 & 語意不明確的問題;
- 特色：兼容性良好(IE8+);語意明確;改圖標只須要修改class的unicode引用;不支持多色;
symbol引用:
- 使用：拷貝symbol代碼,引入CSS代碼,直接選圖標並在應用上應用類名;
- 特色：支持多色圖標;能夠像字體用font-size & color調整樣式;兼容性較差(IE9+);svg渲染性能通常，遜於png.
- 解決問題：單色限制問題.