前端面試必問之三欄佈局及延伸問題

時間  2021-08-13
標籤 css html 前端 vue html5 react css3 git github 面試 欄目 快樂工作 简体版
原文   原文鏈接

前言

簡單對前端面試分析

對於面試咱們常常會要經歷三面、四面或者更多，那這些面試都問啥呢？咱們在面試前是否能夠準備些什麼？css

  1. 一般一面/二面是對咱們的前端知識基礎性問題的考察；
  2. 二面/三面是對咱們前端知識的深度和廣度的考察；
  3. 三面/四面是對咱們業務、項目的考察（尤爲是針對社招人員）；
  4. 終極面試通常是人力資源的面試。

ps：固然咱們在面試前呢，我須要最好是針對JD描述分析（不論是內推仍是招聘網站，咱們最好先看看公司的JD，即崗位職責和任職職責分析如，技術棧需求、業務需求）作到有的放矢（準備相應的技術棧、相應業務知識瞭解），在到簡歷中體現（畢竟面試官對咱們是不瞭解的，他們是針對咱們的簡歷和咱們在面試過程當中溝通在問咱們問題，這裏咱們能夠引導面試官問一些咱們準備好的一些技術問題了）html

咱們要傳達面試官的能力素質和個性品質：前端

一、技術能力達標，可以完成團隊的平常工做vue

（即便當咱們的技術跟公司的技術棧不匹配時，好比公司使用技術棧react，而咱們只會vue，那就沒戲了嗎？首先你要誠實回答，並謙虛的表達你的從新學習能力的心態，甚至能夠適當的請教面試官一些問題，這都是面試官樂見的）html5

二、讓人願意與之相處react

（咱們在回答的問題時，要簡潔，畢竟每個面試都是時間有限；體現本身的團隊協做能力；當以爲面試官問你的問題很簡單的時候，也不要太自滿，以爲面試官不如你，挑釁什麼的）css3

三、會在公司呆好久git

必定要重視基礎和原理，要事先準備，要從自身的實際經歷出發github

問題：三欄佈局

題目

假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各位300px，中間自適應面試

在看正式答案以前，但願你們能夠先思考下這個問題的答案。你可否答出來，且可否在筆試中手寫出來，寫出來你能夠寫幾種答案？具體答案看正式部分哦~

思考：

其實關於這個問題，網上已經有不少的答案，可是面試官仍是會常常會問這個問題？

  • 面試官要考察什麼？
  • 這個問題的延伸問題有哪些？
  • 我答幾種答案纔算及格？（有的會說讓最少寫三種。）

、、、、、、、、、、、、、、、

一、對前端css基礎的掌握

二、有沒有對新知識瞭解

三、有沒有深刻挖掘問題的能力、溝通理解能力

、、、、、、、、、、、、、、

正式

五種經典答案

這裏說的五種答案（浮動佈局、絕對佈局、flexbox、表格佈局、網格佈局），並非說只有五種答案，好比咱們也可使用 calc計算函數來解決 ，且隨着技術發展也可能還有其餘的答案。只是目前這五種比較具備表明性。

1.浮動佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局</title>
    <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>

<body>

    <!-- 浮動佈局解決方案 開始-->
    <section class="layout float">
        <style> .layout.float .left{ float:left; } .layout.float .right{ float:right; } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="right">右邊部分</div>
            <div class="center">中間部分</div>
        </article>
    </section>
    <!-- 浮動佈局解決方案 結束-->
</body>

</html>
複製代碼

ps：注意：

<div class="left">左邊部分</div>
 <div class="right">右邊部分</div>
 <div class="center">中間部分</div>
複製代碼

class爲center的佈局在最後；

2.絕對定位佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局</title>
    <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>

<body>
<!-- 絕對定位解決方案 開始-->
    <section class="layout absolute">
        <style> .layout.absolute .left-center-right>div { position: absolute; } .layout.absolute .left { left: 0; } .layout.absolute .center { left: 300px; right:300px; } .layout.absolute .right { right: 0; } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="center">中間部分</div>
            <div class="right">右邊部分</div>
        </article>
    </section>
    <!-- 絕對定位局部解決方案 結束-->
  </body>

</html>
複製代碼

3.flexbox

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局</title>
    <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>

<body>
    <!-- flexbox解決方案 開始-->
    <section class="layout flexbox">
        <style> .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .center { flex: 1 } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="center">中間部分</div>
            <div class="right">右邊部分</div>
        </article>
    </section>
    <!-- flexbox解決方案 結束-->
  </body>

</html>
複製代碼

4.表格佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局</title>
    <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>

<body>
    <!-- 表格佈局解決方案 開始-->
    <section class="layout table">
        <style> .layout.table .left-center-right { display: table; width:100% } .layout.table .left-center-right>div { display: table-cell; } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="center">中間部分</div>
            <div class="right">右邊部分</div>
        </article>
    </section>
    <!-- 表格佈局解決方案 結束-->
  </body>

</html>
複製代碼

5.網格佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局</title>
    <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>

<body>
    <!-- 網格佈局解決方案 開始-->
    <section class="layout grid">
        <style> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-columns: 300px auto 300px; } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="center">中間部分</div>
            <div class="right">右邊部分</div>
        </article>
    </section>
    <!-- 網格佈局解決方案 結束-->
  </body>

</html>
複製代碼

延伸

五種佈局各自的優缺點

優勢 缺點
浮動佈局 比較簡單，兼容性好 浮動元素脫離文檔流，要作清除浮動，這個處理很差的話，會帶來不少問題，好比父容器高度塌陷等
絕對定位佈局 快捷，設置很方便，並且也不容易出問題 容器脫離了文檔流，後代元素也脫離了文檔流，高度未知的時候，會有問題，這就致使了這種方法的有效性和可以使用性是比較差的。
flexbox css3裏新出的一個，它就是爲了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的佈局也都是用flexbox. IE10開始支持，可是IE10的是-ms形式的
表格佈局 兼容性很好，在flex佈局不兼容的時候，能夠嘗試表格佈局。當內容溢出時會自動撐開父元素。 沒法設置欄邊距；對seo不友好；當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一塊兒變高的，然而有時候這並非咱們想要的效果。
網格佈局 CSS新標準，建立網格佈局最強大和最簡單的工具，能夠將頁面分紅具備簡單屬性的行和列 兼容性很差。IE10+上支持，並且也僅支持部分屬性

若是把高度已知這一條件去掉，五種佈局會有什麼變化？

一、浮動佈局

二、絕對定位佈局

三、flexbox

四、表格佈局

五、網格佈局

從上邊五種佈局的頁面效果能夠看出，浮動和絕對定位佈局須要考慮高度的設定。表格、flexbox、網格沒有設置高度時，根據內容高度呈現，且三欄高度統一 。

五種方案，你若是選擇實際項目中應用會優先選擇哪一種？

沒有一種一勞永逸的方法解決三列布局的問題，咱們經過上邊的五種答案的優缺點就能夠看出。經過分析五種佈局各自的優缺點，瞭解這些優缺點及適用場景，從而在不一樣的應用場景中選擇相應的佈局方式。

好比你的項目時h5的，也須要適用移動端那明顯flexbox就比較適用。

flex佈局是比較適合一維佈局， Grid 佈局則是將容器劃分紅"行"和"列"，產生單元格，而後指定"項目所在"的單元格，能夠看做是二維佈局。Grid 佈局遠比 Flex 佈局強大。 可是須要考慮到grid的兼容性。

CSS3的calc函數

在前面小編有說過使用css3的calc函數也能夠解決這三欄佈局的問題，具體以下：

<!-- calc解決方案 開始-->
    <section class="layout calc">
        <style> .layout.calc .left-center-right { width: 100%; } .layout.calc .left-center-right>div{ float:left; } .layout.calc .center { width: calc(100% - 600px); } </style>
        <article class="left-center-right">
            <div class="left">左邊部分</div>
            <div class="center">中間部分</div>
            <div class="right">右邊部分</div>
        </article>
    </section>
    <!-- calc解決方案 結束-->
複製代碼

使用用法：calc(表達式)

calc() 的使用注意點： 運算符先後都須要保留一個空格，例如：width: calc(100% - 400px)； 任何長度值均可以使用calc()函數進行計算； calc()函數支持 "+", "-", "*", "/" 運算； calc()函數使用標準的數學運算優先級規則；

兼容性：

總結：

具體代碼可查看：github.com/lixiaoyanle…

面試問題考察了哪些問題

1）是否使用html5語義化：section、artcle等熟練使用； 2）頁面佈局理解深入； 3）css基礎知識； 4）代碼書寫規範、（類名的命名） 5）是否瞭解新知識

其餘相關名詞解釋

聖盃佈局和雙飛翼佈局是什麼？

聖盃佈局和雙飛翼佈局解決的問題是相同的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。

聖盃佈局：

alistapart.com/article/hol…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聖盃模型</title>
    <style> html * { padding: 0; margin: 0; } #bd{ padding:0 200px; } #bd>div{ float:left; height:100px; position: relative; } #center{ background: green; width:100%; } #left{ background:red; width: 200px; margin-left:-100%; right:200px; } #right{ background:yellow; width: 200px; margin-right:-200px; } </style>
</head>
<body>
    
    <section>
        <article id="bd">
            <div id="center">中間部分</div>
            <div id="left">左側部分</div>
            <div id="right">右側部分</div>
        </article>
    </section>
    
</body>
</html>
複製代碼

雙飛翼佈局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雙飛翼佈局</title>
    <style> html * { padding: 0; margin: 0; } #bd>div { float: left; height: 100px; } #center { width: 100%; } /*給inside的div添加margin，把內容放到中間欄，其實整個背景仍是100%*/ #inside{ background: green; margin:0 200px; height: 100px; } #left { background: red; width: 200px; margin-left: -100%; } #right { background: yellow; width: 200px; margin-left: -200px; } </style>
</head>

<body>

    <section>
        <article id="bd">
            <div id="center">
                <div id="inside">中間部分</div>
            </div>
            <div id="left">左側部分</div>
            <div id="right">右側部分</div>
        </article>
    </section>

</body>

</html>
複製代碼

聖盃佈局、雙飛翼佈局相同和不一樣點：

相同點 不一樣點
聖盃佈局 一、解決的問題是同樣的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染；二、三欄所有float浮動，左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局 爲了中間div內容不被遮擋，將三欄佈局的父級設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div
雙飛翼佈局 同上 爲了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。

聖盃佈局、雙飛翼佈局優缺點：

優勢 缺點
聖盃佈局 結構簡單，不須要添加多餘dom節點 若是將瀏覽器無線放大時，「聖盃」將會「破碎」掉。如：當中間部分的寬小於左側部分時就會發生布局混亂。
雙飛翼佈局 不會像聖盃佈局那樣變形、通用性強 多加了一層dom節點

聖盃佈局與雙飛翼佈局的優勢：利用佈局，可優先渲染主要部分

flex： www.ruanyifeng.com/blog/2015/0…

grid： www.ruanyifeng.com/blog/2019/0…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程