每天10道題，100天后，搞定所有前端面試的高頻知識點，加油！??！，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什么？想過之后再與答案比對，是不是會更好一點，當然如果你有比我更好的答案，歡迎評論區(qū)留言，一起探討技術之美。
flex布局：
<style> *{margin: 0;padding: 0;} .container{ display: flex; } .left{ width: 300px; height: 100vh; background-color: #f00; } .main{ flex: 1; background-color: #ae5aca; }</style><body> <div class="container"> <div class="left"></div> <div class="main"></div> </div></body>浮動+BFC：
(相關資料圖)
<style> *{margin: 0;padding: 0;} .container { height: 100vh; } .left { float: left; width: 300px; height: 100%; background-color: #f00; } .main { height: 100%; background-color: #ae5aca; overflow: hidden; }</style><body> <div class="container"> <div class="left"></div> <div class="main"></div> </div></body>我：呃~，它們都是作用于縱軸的元素，具體區(qū)別如下：
align-content：作用于縱軸多行元素，一行元素不起作用?！鞠嚓P推薦：web前端開發(fā)】
<style> .container { background-color: #efefef; border: 1px solid #888; margin-top: 3rem; height: 300px; display: flex; flex-wrap: wrap; /* 縱軸多元素一起居中 */ align-content: center; } .item { width: 200px; height: 100px; background-color: #ccc; border: 1px solid #aaa; }</style><body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body>align-items：作用于縱軸單行元素
<style> .container { background-color: #efefef; border: 1px solid #888; margin-top: 3rem; height: 300px; display: flex; flex-wrap: wrap; /* 縱軸單元素居中 */ align-items: center; } .item { width: 200px; height: 100px; background-color: #ccc; border: 1px solid #aaa; }</style><body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body>我：呃~，F(xiàn)lex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。 Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。 Grid 布局遠比 Flex 布局強大。
我：呃~，flex-basis 的值為理想情況，而在實際情況中可能被壓縮，當 flex-direction 為 column 時，主軸為縱軸，此時 flex-basis 與 height 對應
我：呃~，css 加載會直接影響網(wǎng)頁的渲染，因為只有 css 加載完畢，構建完 CSSOM 后，渲染樹(Render Tree)才會構建，然后渲染成位圖，如果 html 中有加載 script 的話，還會間接影響 DOM 樹的解析，因為 javascript 的下載、解析和執(zhí)行和阻塞 DOM 樹的解析，而 javascript 中有可能訪問 CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 構建完畢以后才會開始 javascript 的執(zhí)行，間接阻塞 dom 樹的解析。
我：呃~，好的，層疊上下文就是對這些 HTML 元素的一個三維構想。眾 HTML 元素基于其元素屬性按照優(yōu)先級順序占據(jù)這個空間。優(yōu)先級如下：
想了解更深層疊上下文：推薦文章：深入理解CSS中的層疊上下文和層疊順序 。
我：呃~，不會，我們在進行層疊上下文時，會優(yōu)先比較父級，如果父級是層疊上下文，子級即使有z-index也不再起作用了，如果父級層疊上下文層疊順序相等，那么采取后來居上原則，前者覆蓋后者。如果父級是普通元素，子級層疊比較就不受父級的影響，誰的層疊順序高誰就先展示。
層疊黃金準則：
誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
整出代碼如下：
<style> .first { background-color: red; height: 3rem; z-index: 2; opacity: 0.99; } .item1 { z-index: 0; height: 100%; width: 3rem; background-color: orange; } .second { background-color: blue; height: 3rem; margin-top: -1.5rem; z-index: 3; position: relative; } .item2 { z-index: 999; height: 100%; width: 3rem; background-color: green; }</style><body> <div class="first"> <div class="item1"></div> </div> <div class="second"> <div class="item2"></div> </div></body>我：呃~，Data URL 是將圖片轉換為 base64 直接嵌入到了網(wǎng)頁中。
使用<img src="data:[MIME type];base64"/>這種方式引用圖片，不需要再發(fā)請求獲取圖片。
使用 Data URL 也有一些缺點：
base64 編碼后的圖片會比原來的體積大三分之一左右。
Data URL 形式的圖片不會緩存下來，每次訪問頁面都要被下載一次?？梢詫?Data URL 寫入到 CSS 文件中隨著 CSS 被緩存下來。
我：呃~，system-ui 將會自動選取系統(tǒng)默認字體作為字體。
我：呃~，圣杯布局是指兩端寬度固定，中間自適應。在日常開發(fā)中，圣杯布局的使用頻率是比較高的。舉一個簡單的浮動例子，當然也可以使用定位或flex布局，整出代碼如下：
浮動：
<!DOCTYPE html><html> <head> <meta charset=utf-8> <style type="text/css"> * { margin: 0; padding: 0; } .container { border: 1px solid black; overflow: hidden; padding: 0px 100px; min-width: 100px; } .left { background-color: greenyellow; float: left; width: 100px; margin-left: -100%; position: relative; left: -100px; } .center { background-color: darkorange; float: left; width: 100%; } .right { background-color: darkgreen; float: left; width: 100px; margin-left: -100px; position: relative; left: 100px; } </style> </head> <body> <section class="container"> <article class="center"><br /><br /><br /></article> <article class="left"><br /><br /><br /></article> <article class="right"><br /><br /><br /></article> </section> </body></html>（學習視頻分享：web前端入門、編程基礎視頻）
以上就是看看這些前端面試題，帶你搞定高頻知識點（五）的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
關鍵詞： html
營業(yè)執(zhí)照公示信息