這篇文章主要介紹“web前端面試問答題實例代碼分析”，在日常操作中，相信很多人在web前端面試問答題實例代碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web前端面試問答題實例代碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
我：呃~，浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，導致無法計算準確的高度，這種問題稱為：“高度塌陷”。
清除浮動常見的有以下三種方式，整出代碼如下：
觸發BFC：（有缺陷，會造成內容的溢出隱藏）
<style>
*{margin: 0;padding: 0;}
ul {
list-style: none;
border: 10px solid #ccc;
overflow: hidden; /*觸發BFC清除浮動*/
}
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>多創建一個盒子，并添加樣式：clear:both; ：（不推薦使用，此方法已經過時）
<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>給浮動的父元素添加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>我：呃~，應該使用偶數，因為偶數能讓文字在瀏覽器上表現的更好一點，而且UI給前端一般的設計圖都是偶數的，這樣不管布局也好，轉換px也好，方便一點。
我：呃~，position有如下五個值：
static：默認值，無定位，top、right、bottom、left 不起任何作用
relative：相對定位，不脫離文檔流，只有left、top起作用
absolute：絕對定位，脫離文檔流，上下左右以最近的定位父元素為參照系
fixed：脫離文檔流，上下左右以瀏覽器視口為參照系
sticky：relative 與 fixed 的結合體
以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的默認有一些標簽是有特定樣式的，而我們因為不需要該樣式所有要去除。
reset.css是一個CSS文件，用來重置CSS樣式的，官網為：resetcss
Normalize.css是一個CSS樣式重置表，為增強跨瀏覽器渲染的一致性。官網：Normalize.css
兩種的區別：
normalize.css：會保留有用的樣式，比如 h2 的字體大小
reset.css：把所有樣式都重置，比如 h2、h3、h4 的字體大小都進行了重置，保持了無樣式
如果是普通項目，我個人更傾向于reset.css。
我：呃~，display: none; ：隱藏元素但不占用位置。visibility: hidden; ：隱藏元素但占用位置
display: none; 和 visibility: hidden; 都會造成頁面重繪，使得頁面樣式改變，但是display: none; 還會產生一次回流，改變了元素的位置。
共同性：實現透明效果。
1. opacity：取值范圍0到1之間，0表示完全透明，1表示不透明
2. rgba：R表示紅色，G表示綠色，B表示藍色，取值可以在正整數或者百分數。A表示透明度取值0到1之間。
兩者的區別：繼承的區別，opacity會繼承父元素的opacity屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性。整出代碼如下：
<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>
我：呃~，好的，兩者的區別如下：
偽類使用單冒號，而偽元素使用雙冒號。如 :hover 是偽類，::before 是偽元素
偽元素會在文檔流生成一個新的元素，并且可以使用 content 屬性設置內容
我：呃~，好的，他們各值的意思如下：
rem：根據根元素(即 html)的 font-size
em：根據自身元素的 font-size
vw：viewport width
vh：viewport height
我：呃~，是可以修改的，整出代碼如下：
<style>
input::-webkit-input-placeholder{
color: blue;
}
</style>
<body>
<input type="text" placeholder="請輸入內容">
</body>
到此，關于“web前端面試問答題實例代碼分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
