⻚⾯渲染時， dom 元素所採⽤的
布局模型。可通過 box-sizing 進⾏設定。根據計算寬⾼的區域可分為
content-box ( w3c 標準盒模型) border-box ( ie 盒
模型 ) padding-box
margin-box (瀏覽器未實現)
塊級格式化上下⽂，是⼀個獨⽴的渲染區域，讓處於 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 區域之中)
⾃適應兩欄布局
可以阻⽌元素被浮動元素覆蓋
元素提公升為⼀個⽐較特殊的圖層，在三維空間中 (z軸) ⾼出普通元素⼀等。
觸發條件
根層疊上下⽂( html )
position
css3 屬
性：flex
transform
opacity
filter
will-change
webkit-overflow-scrolling
層疊等級：層疊上下⽂在z軸上的排序
在同⼀層疊上下⽂中，層疊等級才有意義
z-index 的優先順序最⾼
⽔平居中
⾏內元素: 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
!important > ⾏內樣
式 > #id > .class > tag > * > 繼
承 > 默 認選擇器
從右往左
解析通過增加尾元素清除浮動
:after /
: clear: both
建立⽗級 bfc
⽗級設定⾼度
link 功能較多，可以定義 rss ，定義 rel 等作⽤，⽽ @import 只能⽤於載入 css
當解析到 link 時，⻚⾯會同步載入所引的 css ，⽽ @import 所引⽤的 css 會等到⻚
⾯載入完才被載入
@import 需要 ie5 以上才能使⽤
link 可以使⽤ js 動態引⼊， @import 不⾏
css 預處理器的原理: 是將類 css 語⾔通過 webpack 編譯 轉成瀏覽器可讀的真正 css 。在這層編譯之上，便可以賦予 css 更多更強⼤的功能，常
⽤功能:
巢狀變數
迴圈語句
條件語句
⾃動字首
單位轉換
mixin 復
⽤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 : ⽅
向animation-fill-mode : 靜⽌模式forwards : 停⽌時，保留最後⼀幀
backwards : 停⽌時，回到第⼀幀
both : 同時運⽤ forwards / backwards
常⽤鉤⼦: animationend
動畫屬性: 盡量使⽤動畫屬性進⾏動畫，能擁有較好的效能表現
translate
scale
rotate
skew
opacity
color
前端之CSS篇
css本質就是乙個樣式表 主要由選擇器和宣告兩個部分組成，宣告部分又包括屬性跟屬性值 注釋 多行注釋 內部樣式 外部樣式 將css 寫在單獨的檔案中，再進行引用 行內樣式 hello world id選擇器 id名 類選擇器 類名 元素選擇器 元素名 通用選擇器 例子 id1 c1p 後代選擇器 作...
前端常用重難點總結之css篇
今天天氣不錯，心情也一掃陰霾，人生的路，有的時候越走越窄，有的時候越走越多，但是，每一次選擇，便注定意味著無數的錯過，我們應該珍惜每一場相逢，把握好每乙個機會，不向命運低頭。廢話不多說，css篇參上。css篇 1 基礎 1 選擇器概念的理解以及css規則命名慣例 2 三種機制 繼承 層疊 特指 3 ...
前端管中窺豹之CSS篇
注釋內容 可多行注釋 選擇器 屬性 值 屬性 值 head內style標籤內部直接書寫css link標籤引入外部css檔案 直接在標籤被通過style屬性書寫css樣式 id 唯一標識標籤 class 標籤類屬性 可以有多個，類似python物件導向的繼承 標籤名 id名.類名 標籤名1，標籤名2...