每天10道題，100天后，搞定所有前端面試的高頻知識(shí)點(diǎn)，加油?。?！，在看文章的同時(shí)，希望不要直接看答案，先思考一下自己會(huì)不會(huì)，如果會(huì)，自己的答案是什么？想過之后再與答案比對(duì)，是不是會(huì)更好一點(diǎn)，當(dāng)然如果你有比我更好的答案，歡迎評(píng)論區(qū)留言，一起探討技術(shù)之美。
【資料圖】
觸發(fā)BFC：（有缺陷，會(huì)造成內(nèi)容的溢出隱藏）
<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px solid #ccc; overflow: hidden; /*觸發(fā)BFC清除浮動(dòng)*/ } ul li { width: 100px; height: 100px; background-color: #f00; float: left; }</style><body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></body>多創(chuàng)建一個(gè)盒子，并添加樣式：clear:both; ：（不推薦使用，此方法已經(jīng)過時(shí)）【相關(guān)推薦：web前端開發(fā)】
<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px solid #ccc; } ul li { width: 100px; height: 100px; background-color: #f00; float: left; } ul div{ clear: both; }</style><body> <ul> <li>1</li> <li>2</li> <li>3</li> <div></div> </ul></body>給浮動(dòng)的父元素添加after樣式：（推薦使用）
<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px solid #ccc; } ul li { width: 100px; height: 100px; background-color: #f00; float: left; } ul::after{ content: ""; display: block; clear: both; }</style><body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></body>我：呃~，應(yīng)該使用偶數(shù)，因?yàn)榕紨?shù)能讓文字在瀏覽器上表現(xiàn)的更好一點(diǎn)，而且UI給前端一般的設(shè)計(jì)圖都是偶數(shù)的，這樣不管布局也好，轉(zhuǎn)換px也好，方便一點(diǎn)。
我：呃~，position有如下五個(gè)值：
static：默認(rèn)值，無定位，top、right、bottom、left 不起任何作用
relative：相對(duì)定位，不脫離文檔流，只有l(wèi)eft、top起作用
absolute：絕對(duì)定位，脫離文檔流，上下左右以最近的定位父元素為參照系
fixed：脫離文檔流，上下左右以瀏覽器視口為參照系
sticky：relative 與 fixed 的結(jié)合體
以fixed舉例：
<style> *{margin: 0;padding: 0;} body{ height: 2000px; } .main{ width: 100px; height: 100px; left: 20px; top: 50px; background-color: #f00; position: fixed; }</style><body> <div class="main">221</div></body>我：呃~，好的，整出代碼如下：
<style> *{margin: 0;padding: 0;} body{width: 100vw;height: 100vh;} .container{ height: 100%; width: 100%; } .container>div{ float: left; } .zhong{ height: 100vh; width: 100%; background-color: pink; } .zhong .main{ margin: 0 200px; } .zuo{ width: 200px; height: 100vh; background-color: #f00; margin-left: -100%; } .you{ width: 200px; height: 100vh; background-color: #0f0; margin-left: -200px; }</style></head><body> <div class="container"> <div class="zhong"> <div class="main">中</div> </div> <div class="zuo">左</div> <div class="you">右</div> </div></body>我：呃~，CSS的默認(rèn)有一些標(biāo)簽是有特定樣式的，而我們因?yàn)椴恍枰摌邮剿幸コ?/p>
reset.css是一個(gè)CSS文件，用來重置CSS樣式的，官網(wǎng)為：resetcss
Normalize.css是一個(gè)CSS樣式重置表，為增強(qiáng)跨瀏覽器渲染的一致性。官網(wǎng)：Normalize.css
兩種的區(qū)別：
normalize.css：會(huì)保留有用的樣式，比如 h1 的字體大小
reset.css：把所有樣式都重置，比如 h1、h2、h3 的字體大小都進(jìn)行了重置，保持了無樣式
如果是普通項(xiàng)目，我個(gè)人更傾向于reset.css。
我：呃~，display: none; ：隱藏元素但不占用位置。visibility: hidden; ：隱藏元素但占用位置
display: none; 和 visibility: hidden; 都會(huì)造成頁面重繪，使得頁面樣式改變，但是display: none; 還會(huì)產(chǎn)生一次回流，改變了元素的位置。
共同性：實(shí)現(xiàn)透明效果。
1. opacity：取值范圍0到1之間，0表示完全透明，1表示不透明 2. rgba：R表示紅色，G表示綠色，B表示藍(lán)色，取值可以在正整數(shù)或者百分?jǐn)?shù)。A表示透明度取值0到1之間。兩者的區(qū)別：
繼承的區(qū)別，opacity會(huì)繼承父元素的opacity屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。整出代碼如下：
<style> .opacity{ width: 100%; height: 200px; font-size: 50px; font-weight: bold; background-color: #f00; opacity: 0.5; } .rgba{ width: 100%; height: 200px; font-size: 50px; font-weight: bold; background-color: #f00; background: rgba(255, 0, 0, .5); }</style><body> <div class="opacity">這是opacity</div> <hr> <div class="rgba">這是rgba</div></body>我：呃~，好的，兩者的區(qū)別如下：
偽類使用單冒號(hào)，而偽元素使用雙冒號(hào)。如 :hover 是偽類，::before 是偽元素
偽元素會(huì)在文檔流生成一個(gè)新的元素，并且可以使用 content 屬性設(shè)置內(nèi)容
我：呃~，好的，他們各值的意思如下：
rem：根據(jù)根元素(即 html)的 font-size
em：根據(jù)自身元素的 font-size
vw：viewport width
vh：viewport height
我：呃~，是可以修改的，整出代碼如下：
<style> input::-webkit-input-placeholder{ color: blue; }</style> <body> <input type="text" placeholder="請(qǐng)輸入內(nèi)容"></body>（學(xué)習(xí)視頻分享：web前端入門、編程基礎(chǔ)視頻）
以上就是看看這些前端面試題，帶你搞定高頻知識(shí)點(diǎn)（三）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： html
![原文注音：野望——杜甫〔唐代〕[拼音版]](http://www.dianxian.net/uploadfile2022/0610/20220610022121172.jpg "原文注音：野望——杜甫〔唐代〕[拼音版]")
營業(yè)執(zhí)照公示信息