1. 盒模型

• ??渲染時， dom 元素所采?的 布局模型。可通過 box-sizing 進?設置。根據計算寬?的區域可分為
  • content-box ( W3C 標準盒模型)
  • border-box ( IE 盒模型)
  • padding-box
  • margin-box (瀏覽器未實現)

2. BFC

• 塊級格式化上下?，是?個獨?的渲染區域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
• IE下為 Layout ，可通過 zoom:1 觸發

觸發條件:

• 根元素
• position: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !== visible

規則:

• 屬于同?個 BFC 的兩個相鄰 Box 垂直排列
• 屬于同?個 BFC 的兩個相鄰 Box 的 margin 會發?重疊
• BFC 中?元素的 margin box 的左邊， 與包含塊 (BFC) border box 的左邊相接觸(?元素 absolute 除外)
• BFC 的區域不會與 float 的元素區域重疊
• 計算 BFC 的?度時，浮動?元素也參與計算
• ?字層不會被浮動層覆蓋，環繞于周圍

應?:

• 阻? margin 重疊
• 可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個 div 都位于同?個 BFC 區域之中)
• ?適應兩欄布局
• 可以阻?元素被浮動元素覆蓋

3.層疊上下?

• 元素提升為?個?較特殊的圖層，在三維空間中 (z軸) ?出普通元素?等。

觸發條件

• 根層疊上下?( html )
• position
• css3 屬性
  • flex
  • transform
  • opacity
  • filter
  • will-change
  • webkit-overflow-scrolling

層疊等級：層疊上下?在z軸上的排序

• 在同?層疊上下?中，層疊等級才有意義
• z-index 的優先級最?

4. 居中布局

?平居中

• ?內元素: text-align: center
• 塊級元素: margin: 0 auto
• absolute + transform
• flex + justify-content: center

垂直居中

• line-height: height
• absolute + transform
• flex + align-items: center
• table

?平垂直居中

• absolute + transform
• flex + justify-content + align-items

5. 選擇器優先級

• !important > ?內樣式 > #id > .class > tag > * > 繼承 > 默認
• 選擇器 從右往左 解析

6.去除浮動影響，防??級?度塌陷

• 通過增加尾元素清除浮動
• :after /
  : clear: both
• 創建?級 BFC
• ?級設置?度

7.link 與 @import 的區別

• link 功能較多，可以定義 RSS ，定義 Rel 等作?，? @import 只能?于加載 css
• 當解析到 link 時，??會同步加載所引的 css ，? @import 所引?的 css 會等到??加載完才被加載
• @import 需要 IE5 以上才能使?
• link 可以使? js 動態引?， @import 不?

8. CSS預處理器(Sass/Less/Postcss)

• CSS 預處理器的原理: 是將類 CSS 語?通過 Webpack 編譯 轉成瀏覽器可讀的真正 CSS 。在這層編譯之上，便可以賦予 CSS 更多更強?的功能，常?功能:
  • 嵌套
  • 變量
  • 循環語句
  • 條件語句
  • ?動前綴
  • 單位轉換
  • mixin 復?

9.CSS動畫

transition: 過渡動畫

• transition-property : 屬性
• transition-duration : 間隔
• transition-timing-function : 曲線
• transition-delay : 延遲
• 常?鉤?: transitionend

animation / keyframes

• animation-name : 動畫名稱，對應 @keyframes
• animation-duration : 間隔
• animation-timing-function : 曲線
• animation-delay : 延遲
• animation-iteration-count : 次數
  • infinite : 循環動畫
• animation-direction : ?向
  • alternate : 反向播放
• animation-fill-mode : 靜?模式
  • forwards : 停?時，保留最后?幀
  • backwards : 停?時，回到第?幀
  • both : 同時運? forwards / backwards
• 常?鉤?: animationend
• 動畫屬性: 盡量使?動畫屬性進?動畫，能擁有較好的性能表現
  • translate
  • scale
  • rotate
  • skew
  • opacity
  • color