css
-
盒模型（box-sizing）
content-box：W3C盒模型，標(biāo)準(zhǔn)盒模型，width = content.width；
border-box：IE盒模型，怪異盒模型，width = content.width + padding + border；
-
CSS選擇器優(yōu)先級(jí)
!important
行內(nèi)樣式style
id選擇器
類選擇器/屬性選擇器/偽類選擇器（.class.active[href=""]）
元素選擇器/關(guān)系選擇器/偽元素選擇器（html+div>span::after）
通配符選擇器
單位
px：絕對單位，頁面按精確像素展示；
em：相對單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來計(jì)算（瀏覽器默認(rèn)字體是16px），整個(gè)頁面內(nèi)1em不是一個(gè)固定的值；
rem：相對單位，可理解為”root em”, 相對根節(jié)點(diǎn)html的字體大小來計(jì)算，CSS3新加屬性；
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%；
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%；
vmin：vw和vh中較小的那個(gè)；
vmax：vw和vh中較大的那個(gè)；
-
BFC
BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說是一個(gè)隔離的獨(dú)立容器。
- BFC應(yīng)用
- 防止margin重疊
- 清除內(nèi)部浮動(dòng)
- 自適應(yīng)多欄布局（2欄以上）
- 防止字體環(huán)繞
- 觸發(fā)BFC條件
- 根元素
- float值不為none
- overflow值不為visible
- display的值為inline-block、table-cell、table-caption
- position值為absolute、fixed
- BFC特性
- 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置
- 垂直方向上的距離由margin決定
- BFC區(qū)域不會(huì)與float的元素區(qū)域重疊
- 計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算
- BFC就是頁面上的一個(gè)獨(dú)立容器，容器里子元素不會(huì)影響外面元素
- BFC應(yīng)用
-
清除浮動(dòng)
浮動(dòng)元素后面增加空的div，設(shè)置 style 為 clear: both
給父元素添加overflow: hidden或者auto，觸發(fā)BFC
給末尾元素after增加一個(gè)點(diǎn)，并設(shè)置為clear: both
-
block、inline、inline-block
block：可設(shè)置寬高內(nèi)外邊距、獨(dú)占一行、默認(rèn)寬度100%，不受空格影響，可以容納行元素和其他塊元素
inline：不支持寬高設(shè)置、寬度根據(jù)內(nèi)容自動(dòng)撐開、自左向右排列、受空格影響、不獨(dú)占一行
inline-block：支持寬高設(shè)置、自左向右排列、受空格影響、不獨(dú)占一行、塊之間有縫隙、具備塊元素和行內(nèi)元素的所有特點(diǎn)
-
回流與重繪
回流：當(dāng)我們對 DOM 的修改引發(fā)了 DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響），然后再將計(jì)算的結(jié)果繪制出來。這個(gè)過程就是回流（也叫重排）。
重繪：當(dāng)我們對 DOM 的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)，瀏覽器不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式（跳過了上圖所示的回流環(huán)節(jié)）。這個(gè)過程叫做重繪。
