clear法: 設(shè)置

的偽類(lèi):after{clear:both};

overflow法： 設(shè)置

overflow:hidden;

CSS通配符

觀點(diǎn)：

查詢(xún)次數(shù)多&匹配效率低，會(huì)影響性能但是影響不大

影響可維護(hù)性 & 容易造成樣式?jīng)_突

所有需要設(shè)置的元素放在一起設(shè)置

建議使用css reset文件

necolas/normalize.css

jgthms/minireset.css

選擇器性能優(yōu)化 參考：網(wǎng)站CSS選擇器性能討論

樣式系統(tǒng)從最右的選擇符開(kāi)始向左進(jìn)行匹配規(guī)則，只要左邊還有選擇符就會(huì)繼續(xù)向左移動(dòng).

CSS選擇器效率排序(快到慢)：

id選擇器（#myid）

類(lèi)選擇器（.myclassname）

標(biāo)簽選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul < li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel=”external”]）

偽類(lèi)選擇器（a:hover,li:nth-child）

優(yōu)化方法：

id選擇器最快，不要同時(shí)使用其他選擇器

類(lèi)選擇器盡量不合標(biāo)簽選擇器同時(shí)用

明確DOM結(jié)構(gòu)情況下優(yōu)先使用子選擇器

使用類(lèi)選擇器替代后代選擇器&子選擇器

盡量用繼承避免編寫(xiě)重復(fù)樣式

瀏覽器渲染原理

參考：

前端必讀：瀏覽器內(nèi)部工作原理

瀏覽器的渲染：過(guò)程與原理

A 網(wǎng)頁(yè)加載耗時(shí)分布：

DNS查詢(xún)

TCP連接

HTTP請(qǐng)求及響應(yīng)

服務(wù)器響應(yīng)

客戶(hù)端渲染(瀏覽器渲染)

B 渲染引擎

Geoko： Firefox(新版用Quantum)

Webkit: Safari & Chrome

Trident： IE

Edge: Edge

C 渲染流程:

1) 解析html構(gòu)建DOM樹(shù)： 將標(biāo)簽轉(zhuǎn)化為內(nèi)容樹(shù)的DOM節(jié)點(diǎn)

2) 構(gòu)建render樹(shù)：解析外部CSS及style標(biāo)志中的樣式信息，用以構(gòu)建render樹(shù). render樹(shù)由一些包含顏色和大小等屬性的矩形(??)組成，他們將被按照正確順序顯示到屏幕上.(CSS->CSSOM樹(shù)，DOM+CSSOM樹(shù)->render樹(shù))

3) 布局render樹(shù)：確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)

4) 繪制render樹(shù)：遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)

Tip：以上過(guò)程是逐步完成的，為了更好的用戶(hù)體驗(yàn)渲染引擎將會(huì)盡可能早地呈現(xiàn)內(nèi)容，也就是邊解析邊顯示.

渲染優(yōu)化知識(shí)點(diǎn)

關(guān)鍵渲染路徑：與當(dāng)前用戶(hù)操作有關(guān)的內(nèi)容，即用戶(hù)打開(kāi)網(wǎng)頁(yè)時(shí)首屏的顯示.具體到瀏覽器就是HTML&CSS&JS等資源的接收及處理后渲染出頁(yè)面.了解的目的就是為了優(yōu)化，優(yōu)化需要針對(duì)具體問(wèn)題，比如保證首屏內(nèi)容的最快顯示,可以推出PWA也就是漸進(jìn)式頁(yè)面渲染，由此可以再推到資源拆分、場(chǎng)景策略等.

CSS & JS加載：

Tip

CSS會(huì)阻塞渲染直至CSSOM構(gòu)建完畢

穿插在HTML中的script標(biāo)簽將阻塞HTML解析

JS的defer&async

對(duì)inline-script無(wú)效

defer用于延遲執(zhí)行引入并且不阻塞HTML解析.待整個(gè)文檔解析完畢后執(zhí)行defer的JS，最后觸發(fā)DOMContentLoaded事件.

async用于異步引入JS，如果已經(jīng)加載好就會(huì)開(kāi)始執(zhí)行,但是執(zhí)行順序不確定.

優(yōu)化方法：

優(yōu)先引入CSS，JS盡量少影響DOM的構(gòu)建

實(shí)際工程中經(jīng)常將JS放到文檔底部前(非框架文件)

三、background學(xué)習(xí)

定義：用于定義HTML元素的背景.

屬性：

background-color: 背景色

設(shè)定方式：

十六進(jìn)制： #ff0000

RGB: rgb(255, 0, 0)

顏色名稱(chēng): red

RGBA(???)

透明：transparent

inherit：繼承父元素背景色

background-image: 背景圖像(默認(rèn)平鋪重復(fù))

設(shè)定方式： url("[path]")

background-repeat:

水平平鋪：repeat-x

垂直平鋪: repeat-y

不平鋪：no-repeat

background-attachment：是否隨頁(yè)面滾動(dòng)

scroll: 跟隨頁(yè)面滾動(dòng)

fixed：跟隨進(jìn)度條位置

inherit: 繼承自父元素

background-position: 設(shè)置背景圖像的起始位置(Firefox和Opera需要先設(shè)置為fixed才能正常工作)

設(shè)定方式：

top|center|bottom(垂直) left|center|right(水平)

x%(水平) y%(垂直)

xpos(水平) ypos(垂直)

background-origin: 相對(duì)位置

值：padding-box|border-box|content-box

background-size: 背景圖片大小

值： length(寬度,高度)|percentage(寬度,高度)|cover(保持縱橫比并縮放成完全覆蓋背景定位區(qū)域的最大大小)|contain(保持縱橫比并縮放成合適背景定位區(qū)域的最大大小，即只滿(mǎn)足短的方向的等比例縮放)

三、深度思考

1.css可以繪制哪些常見(jiàn)的特殊形狀？

參考：

奇妙的 CSS shapes(CSS圖形)

The Shapes of CSS

梯形、三角形、六邊形、圓形、心型、五角星...

SharpsDemo演示

2.如何理解vertical-align與line-height？

參考：

深入理解line-height與vertical-align

CSS深入理解vertical-align和line-height的基友關(guān)系

line-height: 行高.只影響inline元素及內(nèi)容.

可選值：|||normal|inherit

默認(rèn)值：normal(通常是font-size的1.2倍)

內(nèi)容區(qū)：行內(nèi)文本，font-size決定了其高度;

行內(nèi)框：等于行間距(上半)+內(nèi)容區(qū)+行間距(下半)，line-height決定了其高度;當(dāng)font-size>line-height時(shí)行內(nèi)框小于內(nèi)容區(qū);

行框：行內(nèi)的最高行內(nèi)框頂端到最低行內(nèi)款底端的距離,且各行框頂端挨著上一行框的底端;

框?qū)傩裕?/p>

padding、border、margin的top&bottom都不影響行高（行框高度）, 其left&right都會(huì)應(yīng)用到元素的開(kāi)始結(jié)尾;

行內(nèi)元素的邊框邊界由font-size控制而非line-height;

行內(nèi)替換元素：根據(jù)元素的標(biāo)簽屬性來(lái)決定其顯示的具體內(nèi)容的元素，如 & . 其位于基線(xiàn)(vertical-align:bashline)上, 替換元素的基線(xiàn)是正常流中最后一個(gè)行框的基線(xiàn)，除非元素內(nèi)容為空或者本身的overflow屬性值不是visible，這種情況下基線(xiàn)是marigin底邊緣.

vertical-align

可選值：

關(guān)鍵字值： baseline|sub|super|text-top|text-bottom|middle|top|bottom

長(zhǎng)度值：??em|??px

百分比值：?% (vertical-align的百分比相對(duì)于line-height進(jìn)行計(jì)算)

全局值：inherit|initial|unset

默認(rèn)值：baseline

關(guān)系

對(duì)于內(nèi)聯(lián)元素各種想得通或者想不通的行為表現(xiàn)，基本上都可以用vertical-align和line-height來(lái)解釋?zhuān)约斑M(jìn)行行為矯正

vertical-align的百分比相對(duì)于line-height進(jìn)行計(jì)算

學(xué)習(xí)演示地址

3.請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）以及適用場(chǎng)景？

Flex布局用于簡(jiǎn)潔、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，給盒模型提供最大的靈活性. 采用Flex布局的元素稱(chēng)為Flex容器(flex container), 其所有子元素自動(dòng)成為容器成員即Flex項(xiàng)目(flex item). 容器默認(rèn)存在兩根軸，水平的主軸(main axis)和交叉軸(cross axis),Flex項(xiàng)目默認(rèn)沿主軸排列.

適用場(chǎng)景：

網(wǎng)格布局：設(shè)置flex

百分比布局：先設(shè)置flex:1, 再設(shè)置flex: 0 0 %

圣杯布局: 該填滿(mǎn)的用flex:1

輸入框布局：一側(cè)定長(zhǎng)，其他flex:1填滿(mǎn)

懸掛式布局：一側(cè)定長(zhǎng)，其他flex:1填滿(mǎn)

固定底欄：方向column，定高

流式布局: 參考任務(wù)一

4.title與h1、b與strong、i與em、img的alt與title、src與href有什么區(qū)別 參考：Web品質(zhì)