溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“web前端面試題案例代碼分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web前端面試題案例代碼分析”吧！
我：呃~，好的，可以采用flex布局，或者浮動(dòng)+BFC，整出代碼如下：
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：
<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：作用于縱軸多行元素，一行元素不起作用。
<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 后，渲染樹(shù)(Render Tree)才會(huì)構(gòu)建，然后渲染成位圖，如果 html 中有加載 script 的話，還會(huì)間接影響 DOM 樹(shù)的解析，因?yàn)?javascript 的下載、解析和執(zhí)行和阻塞 DOM 樹(shù)的解析，而 javascript 中有可能訪問(wèn) CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 構(gòu)建完畢以后才會(huì)開(kāi)始 javascript 的執(zhí)行，間接阻塞 dom 樹(shù)的解析。
我：呃~，好的，層疊上下文就是對(duì)這些 HTML 元素的一個(gè)三維構(gòu)想。眾 HTML 元素基于其元素屬性按照優(yōu)先級(jí)順序占據(jù)這個(gè)空間。優(yōu)先級(jí)如下：
我：呃~，不會(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)。在日常開(kāi)發(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>
感謝各位的閱讀，以上就是“web前端面試題案例代碼分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web前端面試題案例代碼分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
