每天10道題，100天后，搞定所有前端面試的高頻知識(shí)點(diǎn)，加油?。。。诳次恼碌耐瑫r(shí)，希望不要直接看答案，先思考一下自己會(huì)不會(huì)，如果會(huì)，自己的答案是什么？想過(guò)之后再與答案比對(duì)，是不是會(huì)更好一點(diǎn)，當(dāng)然如果你有比我更好的答案，歡迎評(píng)論區(qū)留言，一起探討技術(shù)之美。
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>浮動(dòng)+BFC：
(相關(guān)資料圖)
<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(guān)推薦：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 布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局。 Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。 Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。
我：呃~，flex-basis 的值為理想情況，而在實(shí)際情況中可能被壓縮，當(dāng) flex-direction 為 column 時(shí)，主軸為縱軸，此時(shí) flex-basis 與 height 對(duì)應(yīng)
我：呃~，css 加載會(huì)直接影響網(wǎng)頁(yè)的渲染，因?yàn)橹挥?css 加載完畢，構(gòu)建完 CSSOM 后，渲染樹(Render Tree)才會(huì)構(gòu)建，然后渲染成位圖，如果 html 中有加載 script 的話，還會(huì)間接影響 DOM 樹的解析，因?yàn)?javascript 的下載、解析和執(zhí)行和阻塞 DOM 樹的解析，而 javascript 中有可能訪問(wèn) CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 構(gòu)建完畢以后才會(huì)開始 javascript 的執(zhí)行，間接阻塞 dom 樹的解析。
我：呃~，好的，層疊上下文就是對(duì)這些 HTML 元素的一個(gè)三維構(gòu)想。眾 HTML 元素基于其元素屬性按照優(yōu)先級(jí)順序占據(jù)這個(gè)空間。優(yōu)先級(jí)如下：
想了解更深層疊上下文：推薦文章：深入理解CSS中的層疊上下文和層疊順序 。
我：呃~，不會(huì)，我們?cè)谶M(jìn)行層疊上下文時(shí)，會(huì)優(yōu)先比較父級(jí)，如果父級(jí)是層疊上下文，子級(jí)即使有z-index也不再起作用了，如果父級(jí)層疊上下文層疊順序相等，那么采取后來(lái)居上原則，前者覆蓋后者。如果父級(jí)是普通元素，子級(jí)層疊比較就不受父級(jí)的影響，誰(shuí)的層疊順序高誰(shuí)就先展示。
層疊黃金準(zhǔn)則：
誰(shuí)大誰(shuí)上：當(dāng)具有明顯的層疊水平標(biāo)示的時(shí)候，如識(shí)別的z-indx值，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。通俗講就是官大的壓死官小的。
后來(lái)居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素。
整出代碼如下：
<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 是將圖片轉(zhuǎn)換為 base64 直接嵌入到了網(wǎng)頁(yè)中。
使用<img src="data:[MIME type];base64"/>這種方式引用圖片，不需要再發(fā)請(qǐng)求獲取圖片。
使用 Data URL 也有一些缺點(diǎn)：
base64 編碼后的圖片會(huì)比原來(lái)的體積大三分之一左右。
Data URL 形式的圖片不會(huì)緩存下來(lái)，每次訪問(wèn)頁(yè)面都要被下載一次。可以將 Data URL 寫入到 CSS 文件中隨著 CSS 被緩存下來(lái)。
我：呃~，system-ui 將會(huì)自動(dòng)選取系統(tǒng)默認(rèn)字體作為字體。
我：呃~，圣杯布局是指兩端寬度固定，中間自適應(yīng)。在日常開發(fā)中，圣杯布局的使用頻率是比較高的。舉一個(gè)簡(jiǎn)單的浮動(dòng)例子，當(dāng)然也可以使用定位或flex布局，整出代碼如下：
浮動(dòng)：
<!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>（學(xué)習(xí)視頻分享：web前端入門、編程基礎(chǔ)視頻）
以上就是看看這些前端面試題，帶你搞定高頻知識(shí)點(diǎn)（五）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： html
營(yíng)業(yè)執(zhí)照公示信息