html常見元素

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

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

html5

html分類

html巢狀

html預設樣式

略

面試題

Cascading Style Sheet(層疊樣式表)

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

非佈局樣式

字型

• 字型族不需要引號

行高

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

背景

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

邊框

滾動

文字折行

裝飾屬性

佈局

• absolute是以最近父級absolute或者relative來定位的，如果沒有就以body定位
• z-index適用於absolute和relative屬性

table表格佈局

float浮動 + margin

• 脫離文件流，不脫離文字流
• BFC
• 儘量靠上左（右）
• 小心父級高度塌陷
  
  • overflow:auto
  • 清除浮動

inline-block 佈局

• 自適應比較繁瑣
• 需要處理間隙
  
  • 程式碼間空白導致
  • font-size:0

flexbox佈局

• 彈性盒子
• 盒子本來就是並列的
• 指定寬度即可

響應式

效果

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

真題

動畫

• 視覺暫留

補間動畫transition

關鍵幀動畫keyframes

逐幀動畫

• 適用無法補間計算的動畫
• 資源較大
• animation-timing-function
• 使用steps()去掉補間

CSS前處理器

Bootstrap

• BootstrapJS使用方式
  
  • 基於data-* 屬性
  • 基於JS API
• 定製方法
  
  • 使用CSS同名類覆蓋
  • 修改原始碼重新構建
  • 引用scss原始檔 修改變數

css工程化

PostCSS

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

webpack

Angular

• ShadowDOM
  
  • 邏輯上一個DOM
  • 結構上存在子集結構
• Scoped CSS
  
  • 限定了範圍CSS
  • 無法影響外部元素
  • 外部樣式一般不影響內部
  • 可以通過 /deep/ 或 >>> 穿透
    

Vue

React

• npm run eject 釋放底層配置
• styled-components