面試 01-頁面佈局

阿新 • • 發佈：2020-12-15

01-頁面佈局

#前端面試（前言）

#面試基礎

頁面佈局
CSS盒模型：是CSS的基石。
DOM事件
HTTP協議
面向物件
原型鏈：能說出原型鏈的始末

#面試進階

通訊：普通的通訊、跨域通訊
安全：CSRF、XSS。
演算法

#回答問題時要注意的

（1）題乾的要求真的是字面要求的這麼簡單嗎？

（2）答案怎麼寫，技巧在哪裡

（3）如果想證明我的實力，應該有幾種答案？

本文來講一下頁面佈局。

#題目：頁面佈局

問題：假設容器的高度預設100px，請寫出三欄佈局，其中左欄、右欄的寬度各為300px，中間的寬度自適應。

分析：

初學者想到的答案有兩種：

方法1：浮動
方法2：絕對定位。

但要求你能至少寫出三四種方法，才算及格。剩下的方法如下：

方法3：flexbox。移動開發裡經常用到。
方法4：表格佈局 table。雖然已經淘汰了，但也應該瞭解。
方法5：網格佈局 grid。

下面分別講解。

#方法1 和方法2

方法1、浮動：

左側設定左浮動，右側設定右浮動即可，中間會自動地自適應。

方法2、絕對定位：

左側設定為絕對定位， left：0px。右側設定為絕對定位， right：0px。中間設定為絕對定位，left 和right 都為300px，即可。中間的寬度會自適應。

使用article標籤作為容器，包裹左、中、右三個部分。

方法1 和方法2 的程式碼如下：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0px;
            margin: 0px;
        }

        .layout {
            margin-bottom: 150px;
        }


        .layout article div { /*注意，這裡是設定每個小塊兒的高度為100px，而不是設定大容器的高度。大容器的高度要符合響應式*/
            height: 100px;
        }

        /* 方法一 start */

        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }

        .layout.float .center {
            background: green;

        }

        /* 方法一 end */


        /* 方法二 start */
        .layout.absolute .left-center-right {
            position: relative;
        }

        .layout.absolute .left {
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }

        /* 【重要】中間的區域，左側定位300px，右側定位為300px，即可完成。寬度會自使用 */
        .layout.absolute .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background: green;
        }

        .layout.absolute .right {
            position: absolute;
            right: 0;
            width: 300px;
            background: blue;
        }


        /* 方法二 end */
    </style>
</head>

<body>

    <!-- 方法一：浮動 start -->
    <!-- 輸入 section.layout.float，即可生成  -->
    <section class="layout float">
        <!-- 用  article 標籤包裹左、中、右三個部分 -->
        <article class="left-right-center">
            <!-- 輸入 div.left+div.right+div.center，即可生成 -->
            <div class="left">
                我是 left
            </div>
            <div class="right">
                我是 right
            </div>
            <div class="center">
                浮動解決方案
                我是 center
            </div>

        </article>

    </section>
    <!-- 方法一：浮動 end -->

    <section class="layout absolute">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="right">
                我是 right
            </div>
            <div class="center">
                <h1>絕對定位解決方案</h1>
                我是 center
            </div>
        </article>
    </section>
</body>
</html>

注意上方程式碼中， className 定義和使用，非常規範。

效果如下：

#方法3、flexbox佈局

將左中右所在的容器設定為display: flex，設定兩側的寬度後，然後讓中間的flex = 1，即可。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            height: 100px;
        }

        .left-center-right {
            display: flex;
        }

        .layout.flex .left {
            width: 300px;
            background: red;
        }

        .layout.flex .center {
            flex: 1;
            background: green;
        }

        .layout.flex .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout flex">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>flex佈局解決方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>

效果如下：

#方法4、表格佈局 table

設定整個容器的寬度為100%，設定三個部分均為表格，然後左邊的單元格為 300px，右邊的單元格為 300px，即可。中間的單元格會自適應。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout.table div {
            height: 100px;
        }

        /* 重要：設定容器為表格佈局，寬度為100% */
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;

        }

        .layout.table .left-center-right div {
            display: table-cell; /* 重要：設定三個模組為表格裡的單元*/
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            background: green;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>表格佈局解決方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>

#方法5、網格佈局 grid

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        /* 重要：設定容器為網格佈局，寬度為100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：設定網格為三列，並設定每列的寬度。即可。*/

        }

        .layout.grid .left {
            background: red;
        }

        .layout.grid .center {
            background: green;
        }

        .layout.grid .right {
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>網格佈局解決方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>

效果：

#延伸：五種方法的對比

五種方法的優缺點
考慮中間模組的高度問題
相容性問題：實際開發中，哪個最實用？

方法1：浮動：

優點：相容性好。
缺點：浮動會脫離標準文件流，因此要清除浮動。我們解決好這個問題即可。

方法:2：絕對定位

優點：快捷。
缺點：導致子元素也脫離了標準文件流，可實用性差。

方法3：flex 佈局（CSS3中出現的）

優點：解決上面兩個方法的不足，flex佈局比較完美。移動端基本用 flex佈局。

方法4：表格佈局

優點：表格佈局在很多場景中很實用，相容性非常好。因為IE8不支援 flex，此時可以嘗試表格佈局
缺點：因為三個部分都當成了單元格來對待，此時，如果中間的部分變高了，其會部分也會被迫調整高度。但是，在很多場景下，我們並不需要兩側的高度增高。

什麼時候用 flex 佈局 or 表格佈局，看具體的場景。二者沒有絕對的優勢，也沒有絕對的不足。

方法5：網格佈局

CSS3中引入的佈局，很好用。程式碼量簡化了很多。

PS：面試提到網格佈局，說明我們對新技術是有追求的。

#延伸：如果題目中去掉高度已知

問題：題目中，如果去掉高度已知，我們往中間的模組裡塞很多內容，讓中間的模組撐開。會發生什麼變化？哪個佈局就不能用了？

分析：其實可以這樣理解，我們回去看上面的動畫效果，當中間的模組變得很擠時，會發生什麼效果？就是我們想要的答案。

答案是：flex 佈局和表格佈局可以通用，其他三個佈局都不能用了。

#頁面佈局的變通

上下高度固定，中間自適應，這個在移動端的頁面中很常見。

#總結

涉及到的知識點：

（1）語義化掌握到位：每個區域用section、article代表容器、div代表塊兒。如果通篇都用 div，那就是語義化沒掌握好。

（2）頁面佈局理解深刻。

（3）CSS基礎知識紮實。

（4）思維靈活且積極上進。題目中可以通過網格佈局來體現。

（5）程式碼書寫規範。注意命名。上面的程式碼中，沒有一行程式碼是多的。

面試 01-頁面佈局

01-頁面佈局 #前端面試（前言） #面試基礎頁面佈局 CSS盒模型：是CSS的基石。 DOM事件

Flutter開發實戰初級（2）頁面佈局詳解

初級基礎系列 Flutter開發實戰初級（1）ListView詳解 Flutter開發實戰初級（2）佈局詳解

UICollectionView 01 - 基礎佈局篇

一，程式碼： 1.佈局方式設定，建立UICollectionView - (void)initailContentView { //導航 self.navigationBar = ({

vue中商品詳情頁面佈局及功能實現點選小圖切換大圖

需求：點選下方小圖時，上方大圖轉換為相對應小圖。程式碼實現部分 HTML部分

解決VUE mounted 鉤子函式執行時 img 未載入導致頁面佈局的問題

專案需求：圖片載入時，當滑鼠滾動至當前圖片進行載入並加上上滑特效，實現這個效果需要對文件文件滾動位置和圖片的當前位置進行比較。但是mounted 鉤子函式執行時img圖片並未加載出來也就是佔位為空，導致圖片位置計

頁面佈局

1、padding-bottom實現等比例縮放原理：1、父元素設定定位為相對定位（position: relative）2、子元素設定定位為絕對定位（position: absolute）3、父元素padding-bottom值為百分比時以父元素為參考，正方形時同父元

ASP.NET Web Pages - 頁面佈局

通過 Web Pages，很容易建立佈局一致的網站。一致的外觀在因特網上，您會發現很多擁有統一外觀的網站：

Vue--整體頁面佈局

前戲前面我們已經寫好了登入頁面，當正常登入後應該跳轉到首頁我們的頂部導航欄和左側導航欄一般是固定的，我們可以佈局成下面的樣式

前端頁面佈局中水平、垂直居中問題

水平垂直居中 1.給元素定位使之居中（利用定位和transform平移的那種方法就不需要寫了）

後臺管理頁面佈局、web頁面佈局

做一個簡單的頁面佈局基本結構如下 <body>  <div style="display: none;">

Python20-05_頁面佈局----grid佈局管理器詳解

grid佈局管理器詳解 tkinter提供了三種管理器, pack, grid, place. 幫助我們組織, 管理在父元件中子元件的佈局方式

Python21-01_頁面佈局----Practice: 計算機軟體頁面設計

Practice: 計算機軟體頁面設計通過grid佈局佈局,實現計算機軟體介面(不需要實現其功能)

2020.10.8 定位的疊放順序絕對盒子居中浮動和定位新增的特性頁面佈局總結

定位的疊放順序 1.z-index 只適用於已經定位的盒子 2.如果z-index相同則遵循就近原則 3.z-index大的在上 4.*注意數字z-index: 1 ;*後面不要加單位

android軟鍵盤彈出時如何處理頁面佈局

android裡軟鍵盤彈出頂起當前佈局是常見的問題。首先了解下軟鍵盤和activity的幾個互動模式（windowSoftInputMode）

Nuxt pages下不同的頁面對應layout下的頁面佈局操作

有時候我們pages中不同的頁面需要不同的個性化佈局這時候layout就起作用了 layouts 根目錄下的所有檔案都屬於個性化佈局檔案，可以在頁面元件中利用 layout 屬性來引用。

前端之移動頁面佈局

移動端app分類 1、Native App 原生app手機應用程式使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-C2、Hybrid App 混合型app手機應用程式混合使用原生的程式和html5頁面開發的手機應用3

微信小程式實現音樂播放頁面佈局

本文例項為大家分享了微信小程式實現音樂播放頁面的佈局，供大家參考，具體內容如下

Django 修改 Admin 後臺頁面佈局

需求：修改 Django Admin 後臺頁面佈局 #新建立工程 test34 #新建立應用 stu #修改 settings.py

鴻蒙OS應用開發之——頁面佈局TableLayout

技術標籤：HarmonyOS 一概述 TableLayout類似於Android中的TableLayout以列表的方式展示內容時，使用TableLayout

鴻蒙OS應用開發之——頁面佈局DependentLayout

技術標籤：HarmonyOS 一概述 DependentLayout相當於Android中的相對佈局RelativeLayoutDependentLayout與DirectionalLayout相比有更多的排列方式每個元件可以指定相對於其他同級元素的位置，或者指定相對於父元

面試 01-頁面佈局

01-頁面佈局

#前端面試（前言）

#面試基礎

#面試進階

#回答問題時要注意的

#題目：頁面佈局

#方法1 和方法2

#方法3、flexbox佈局

#方法4、表格佈局 table

#方法5、網格佈局 grid

#延伸：五種方法的對比

#延伸：如果題目中去掉高度已知

#頁面佈局的變通

#總結

相關推薦