clear法: 設置

的偽類:after{clear:both};

overflow法： 設置

overflow:hidden;

CSS通配符

觀點：

查詢次數多&匹配效率低，會影響性能但是影響不大

影響可維護性 & 容易造成樣式沖突

所有需要設置的元素放在一起設置

建議使用css reset文件

necolas/normalize.css

jgthms/minireset.css

選擇器性能優化 參考：網站CSS選擇器性能討論

樣式系統從最右的選擇符開始向左進行匹配規則，只要左邊還有選擇符就會繼續向左移動.

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

id選擇器（#myid）

類選擇器（.myclassname）

標簽選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul < li）

后代選擇器（li a）

通配符選擇器（*）

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

偽類選擇器（a:hover,li:nth-child）

優化方法：

id選擇器最快，不要同時使用其他選擇器

類選擇器盡量不合標簽選擇器同時用

明確DOM結構情況下優先使用子選擇器

使用類選擇器替代后代選擇器&子選擇器

盡量用繼承避免編寫重復樣式

瀏覽器渲染原理

參考：

前端必讀：瀏覽器內部工作原理

瀏覽器的渲染：過程與原理

A 網頁加載耗時分布：

DNS查詢

TCP連接

HTTP請求及響應

服務器響應

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

B 渲染引擎

Geoko： Firefox(新版用Quantum)

Webkit: Safari & Chrome

Trident： IE

Edge: Edge

C 渲染流程:

1) 解析html構建DOM樹： 將標簽轉化為內容樹的DOM節點

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

3) 布局render樹：確定每個節點在屏幕上的確切坐標

4) 繪制render樹：遍歷render樹，并使用UI后端層繪制每個節點

Tip：以上過程是逐步完成的，為了更好的用戶體驗渲染引擎將會盡可能早地呈現內容，也就是邊解析邊顯示.

渲染優化知識點

關鍵渲染路徑：與當前用戶操作有關的內容，即用戶打開網頁時首屏的顯示.具體到瀏覽器就是HTML&CSS&JS等資源的接收及處理后渲染出頁面.了解的目的就是為了優化，優化需要針對具體問題，比如保證首屏內容的最快顯示,可以推出PWA也就是漸進式頁面渲染，由此可以再推到資源拆分、場景策略等.

CSS & JS加載：

Tip

CSS會阻塞渲染直至CSSOM構建完畢

穿插在HTML中的script標簽將阻塞HTML解析

JS的defer&async

對inline-script無效

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

async用于異步引入JS，如果已經加載好就會開始執行,但是執行順序不確定.

優化方法：

優先引入CSS，JS盡量少影響DOM的構建

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

三、background學習

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

屬性：

background-color: 背景色

設定方式：

十六進制： #ff0000

RGB: rgb(255, 0, 0)

顏色名稱: red

RGBA(???)

透明：transparent

inherit：繼承父元素背景色

background-image: 背景圖像(默認平鋪重復)

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

background-repeat:

水平平鋪：repeat-x

垂直平鋪: repeat-y

不平鋪：no-repeat

background-attachment：是否隨頁面滾動

scroll: 跟隨頁面滾動

fixed：跟隨進度條位置

inherit: 繼承自父元素

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

設定方式：

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

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

xpos(水平) ypos(垂直)

background-origin: 相對位置

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

background-size: 背景圖片大小

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

三、深度思考

1.css可以繪制哪些常見的特殊形狀？

參考：

奇妙的 CSS shapes(CSS圖形)

The Shapes of CSS

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

SharpsDemo演示

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

參考：

深入理解line-height與vertical-align

CSS深入理解vertical-align和line-height的基友關系

line-height: 行高.只影響inline元素及內容.

可選值：|||normal|inherit

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

內容區：行內文本，font-size決定了其高度;

行內框：等于行間距(上半)+內容區+行間距(下半)，line-height決定了其高度;當font-size>line-height時行內框小于內容區;

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

框屬性：

padding、border、margin的top&bottom都不影響行高（行框高度）, 其left&right都會應用到元素的開始結尾;

行內元素的邊框邊界由font-size控制而非line-height;

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

vertical-align

可選值：

關鍵字值： baseline|sub|super|text-top|text-bottom|middle|top|bottom

長度值：??em|??px

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

全局值：inherit|initial|unset

默認值：baseline

關系

對于內聯元素各種想得通或者想不通的行為表現，基本上都可以用vertical-align和line-height來解釋，以及進行行為矯正

vertical-align的百分比相對于line-height進行計算

學習演示地址

3.請解釋一下CSS3的Flexbox（彈性盒布局模型）以及適用場景？

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

適用場景：

網格布局：設置flex

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

圣杯布局: 該填滿的用flex:1

輸入框布局：一側定長，其他flex:1填滿

懸掛式布局：一側定長，其他flex:1填滿

固定底欄：方向column，定高

流式布局: 參考任務一

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