溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

web前端面試問答題實(shí)例代碼分析

發(fā)布時間：2023-02-17 15:58:30 來源：億速云 閱讀：138 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“web前端面試問答題實(shí)例代碼分析”，在日常操作中，相信很多人在web前端面試問答題實(shí)例代碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web前端面試問答題實(shí)例代碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

面試官：清除浮動有哪些方式？

我：呃~，浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，導(dǎo)致無法計算準(zhǔn)確的高度，這種問題稱為：“高度塌陷”。

清除浮動常見的有以下三種方式，整出代碼如下：

觸發(fā)BFC：（有缺陷，會造成內(nèi)容的溢出隱藏）

<style>
    *{margin: 0;padding: 0;}
    ul {
        list-style: none;
        border: 10px solid #ccc;
        overflow: hidden; /*觸發(fā)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>

多創(chuàng)建一個盒子，并添加樣式：clear:both; ：（不推薦使用，此方法已經(jīng)過時）

<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>

面試官：在網(wǎng)頁中應(yīng)該使用奇數(shù)還是偶數(shù)的字體？

我：呃~，應(yīng)該使用偶數(shù)，因?yàn)榕紨?shù)能讓文字在瀏覽器上表現(xiàn)的更好一點(diǎn)，而且UI給前端一般的設(shè)計圖都是偶數(shù)的，這樣不管布局也好，轉(zhuǎn)換px也好，方便一點(diǎn)。

面試官：position有哪些值？分別是根據(jù)什么定位？

我：呃~，position有如下五個值：

static：默認(rèn)值，無定位，top、right、bottom、left 不起任何作用

relative：相對定位，不脫離文檔流，只有l(wèi)eft、top起作用

absolute：絕對定位，脫離文檔流，上下左右以最近的定位父元素為參照系

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>

web前端面試問答題實(shí)例代碼分析

面試官：寫一個左中右布局占滿屏幕，其中左右倆塊固定寬200px，中間自適應(yīng)，要求先加載中間塊，請寫出結(jié)構(gòu)及其樣式。

我：呃~，好的，整出代碼如下：

<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>

web前端面試問答題實(shí)例代碼分析

面試官：什么是CSS reset？

我：呃~，CSS的默認(rèn)有一些標(biāo)簽是有特定樣式的，而我們因?yàn)椴恍枰摌邮剿幸コ?/p>

reset.css是一個CSS文件，用來重置CSS樣式的，官網(wǎng)為：resetcss

Normalize.css是一個CSS樣式重置表，為增強(qiáng)跨瀏覽器渲染的一致性。官網(wǎng)：Normalize.css

兩種的區(qū)別：

normalize.css：會保留有用的樣式，比如 h2 的字體大小

reset.css：把所有樣式都重置，比如 h2、h3、h4 的字體大小都進(jìn)行了重置，保持了無樣式

如果是普通項(xiàng)目，我個人更傾向于reset.css。

面試官：display: none; 與 visibility: hidden; 的區(qū)別？

我：呃~，display: none; ：隱藏元素但不占用位置。visibility: hidden; ：隱藏元素但占用位置

display: none; 和 visibility: hidden; 都會造成頁面重繪，使得頁面樣式改變，但是display: none; 還會產(chǎn)生一次回流，改變了元素的位置。

面試官：opacity 和 rgba 的區(qū)別

共同性：實(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會繼承父元素的opacity屬性，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性。整出代碼如下：

<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>

web前端面試問答題實(shí)例代碼分析

面試官：偽類與偽元素有什么區(qū)別？解釋一下偽元素的作用

我：呃~，好的，兩者的區(qū)別如下：

偽類使用單冒號，而偽元素使用雙冒號。如 :hover 是偽類，::before 是偽元素

偽元素會在文檔流生成一個新的元素，并且可以使用 content 屬性設(shè)置內(nèi)容

面試官：rem、em、vw、vh 的值各是什么意思？

我：呃~，好的，他們各值的意思如下：

rem：根據(jù)根元素(即 html)的 font-size

em：根據(jù)自身元素的 font-size

vw：viewport width

vh：viewport height

面試官：webkit表單輸入框placeholder的顏色值能改變嗎?

我：呃~，是可以修改的，整出代碼如下：

<style>
    input::-webkit-input-placeholder{
        color: blue;
    }
</style> 
<body>
    <input type="text" placeholder="請輸入內(nèi)容">
</body>

web前端面試問答題實(shí)例代碼分析

到此，關(guān)于“web前端面試問答題實(shí)例代碼分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手