全面系統講解CSS 工作應用

基於慕課網TooooBug老師的課程做的總結，課程地址

html常見元素

• meta
• title
• style
• link
• script
• base
• div/section /article/aside/header/footer
• p
• span /em/strong
• table/thead/tbody /tr/td
• ul/ol/li/dl/dt/dd
• a
• form/input/select/textarea/button

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<base href="/">

• a[href,target]
• img[src,alt]
• table td[colspan,rowspan]
• form[target,method,enctype]
• input[type,value]
• button[type]
• select>option[value]
• label[for]

問題：當我們使用ajax方式提交資料時還需要from表單嗎？

需要。利用Jqury進行批次提交，或者（框架結合，驗證元件去做表單驗證，還有from的特性，記住使用者的賬號密碼）

HTML5

• 新區塊標籤
  • section
  • article
  • nav
  • aside
• 表單增強
  • 日期、時間、搜尋
  • 表單驗證
  • Placeholder自動聚焦
• header/footer頭尾
• section/article 區域
• nav導航
• aside 不重要內容
• em/strong 強調
• iicon

html分類

html巢狀

問題：doctype的意義是什麼

• 讓瀏覽器以標準模式渲染
• 讓瀏覽器知道元素的合法性

問題：HTML XHTML HTML5的關係

• HTML屬於SGML
• XHTML屬於XML，是HTML進行XML嚴格化的結果
• HTML5不屬於SGML或XML，比XHTML寬鬆

問題：em和i有什麼區別

• em是語義化的標籤，表強調
• i是純樣式的標籤，表斜體
• HTML5中i不推薦使用，一般用作圖示

問題：語義化的意義是什麼

• 開發者容易理解
• 機器容易理解結構（搜尋、讀屏軟體）
• 有助於SEO
• semantic microdata

問題：哪些元素可以自閉合

• 表單元素input
• 圖片img
• br hr
• meta link

問題：HTML和DOM的關係

• HTML是“死”的
• DOM由HTML解析而來，是活的
• JS可以維護DOM

問題：property和attribute的區別

• attribute是“死”的
• property是“活”的

問題：form的作用有哪些

• 直接提交表單
• 使用submit/reset按鈕
• 便於瀏覽器儲存表單
• 第三方庫可以整體提取值
• 第三方庫可以進行表單驗證

Cascading Style Sheet(層疊樣式表)

• CSS解析從右向左解析（高效）
• 優先順序不能透過數量疊加超過比自己強大的優先順序
• !important 優先順序最高
• 元素屬性 優先順序高
• 相同權重 後寫的生效
  
  
  

非佈局樣式

字型

• 字型族不需要引號
• 字型族
  • serif sans-serif monospace cursive fantasy
• 多字型fallback
• 網路字型、自定義字型
• iconfont
  

行高

• line-height
• vertical-align 基線 圖片縫隙問題

背景

• 顏色
• 漸變 linear-gradient
• 多背景疊加
• 雪碧圖
• base64 和效能最佳化
  • 用來少量圖示上
  • css檔案增大，圖片體積增加三分之一，不過減少HTTP請求數
• 解析度適配

邊框(略)

滾動

文字折行

• overflow-wrap(word-wrap)通用換行控制
  • 是否保留單詞
• word-break 針對多位元組文字
  • 中文句子也是單詞
• white-space 空白處是否斷行

裝飾屬性

• 字重（粗體）font-weight
• 斜體 font-style:itatic
• 下劃線text-decoration
• 指標 cursor

佈局

• absolute是以最近父級absolute或者relative來定位的，如果沒有就以body定位
• z-index適用於absolute和relative屬性
• table表格佈局
• float浮動 + margin
  • 脫離文件流，不脫離文字流
  • BFC
  • 儘量靠上左（右）
  • 小心父級高度塌陷
    • overflow:auto
    • 清除浮動
• inline-block 佈局
  • 自適應比較繁瑣
  • 需要處理間隙
  • 程式碼間空白導致
  • font-size:0
• flexbox佈局
  • 彈性盒子
  • 盒子本來就是並列的
  • 指定寬度即可
• 響應式
  • 在不同裝置上正常使用
• 一般主要處理螢幕大小問題
• 主要方法：
  • 隱藏+折行+自適應空間
  • rem/viewport/media query

效果

• box-shadow
• text-shadow
• border-radius
• background
• clip-path
  • 保持原來的大小
  • 支援動畫

問題

• 如何用一個div畫XXX
  • box-shadow無限投影
  • ：:before
  • ：:after
• 如何產生不佔空間的邊框
  • box-shadow
  • outline
• 如何實現iOS圖示的圓角
  

動畫

• 視覺暫留
• 補間動畫transition
  • 位置-平移(left/right/margin/transform)
  • 方位-旋轉（transform)
  • 大小-縮放(transform)
  • 透明度（opacity)
  • 其它-線性變換（transform)
• 關鍵幀動畫keyframes
• 逐幀動畫
  • 適用無法補間計算的動畫
  • 資源較大
  • animation-timing-function
  • 使用steps()去掉補間

過渡動畫和關鍵幀動畫的區別

• 過渡動畫需要有狀態變化
• 關鍵幀動畫不需要狀態變化
• 關鍵幀動畫能控制更精細

CSS動畫的效能

• 1.效能不壞
• 2.部分情況下優於JS
• 3.但JS可以做到更好
• 4.部分高危屬性
• box-shadow等

CSS前處理器

• 巢狀反映層級和約束
• 變數和計算減少重複程式碼
• Extend和Mixin程式碼片段
• 迴圈適用於複雜有規律的樣式
• import CSS檔案模組化

Bootstrap

• BootstrapJS使用方式
  • 基於data-* 屬性
  • 基於JS API
• 定製方法
  • 使用CSS同名類覆蓋
  • 修改原始碼重新構建
  • 引用scss原始檔 修改變數
• Bootstrap的優缺點
  • 優點：CSS程式碼結構合理現成的樣式可以直接用
  • 缺點：定製較為繁瑣體積大
• Bootstrap如何實現響應式佈局
  • 原理：透過media query設定不同解析度的class
  • 使用：為不同解析度選擇不同的網格class

css工程化

• PostCSS
  • 外掛
  • import 模組合併
  • autoprefixier 自動加字首
  • cssnano 壓縮程式碼
  • cssnext 使用CSS新特性
    
• precss 變數，mixin，迴圈等
• 

webpack

• css-loader 將CSS變成JS
• style-loader 將JS樣式插入head
• ExtractTextPlugin 將CSS從JS中提取出來
• css modules解決CSS命名衝突的問題
• less-loader sass-loader 各類前處理器
• postcss-loader PostCSS處理

如何解決CSS模組化問題

• Less Sass等CSS前處理器
• PostCSS外掛（postcss-import/precss等）
• webpack處理CSS(css-loader+style-loader)

PostCSS可以做什麼?

• 取決於外掛可以做什麼
• autoprefixer cssnext precss等相容性處理
• import模組合併
• css語法檢查相容性檢查
• 壓縮檔案

CSS modules是做什麼的，如何使用

• 解決類名衝突的問題
• 使用PostCSS或者webpack等構建工具進行編譯
• 在HTML模板中使用編譯過程產生的類名

Angular

• ShadowDOM
  • 邏輯上一個DOM
  • 結構上存在子集結構
• Scoped CSS
  • 限定了範圍CSS
  • 無法影響外部元素
  • 外部樣式一般不影響內部
  • 可以透過 /deep/ 或 >>> 穿透
• 模擬Scoped CSS
  • 方案一：隨機選擇器（不支援）
  • 方案二：隨機屬性
    • <div abcdefg>
    • div[abcdefg]{}
      

Vue

• 模擬Scoped CSS
  • 方案一：隨機選擇器
    • css modules
  • 方案二：隨機屬性
    • <div abcdefg>
    • div[abcdefg]{}

React

• 官方沒有整合方案
• 社群方案眾多
  • css modules
  • (babel)react-css-modules
  • styled components
  • styled jsx
• npm run eject 釋放底層配置
• styled-components