前端面試：項(xiàng)目中用過(guò)grid嗎？flex布局和gri

前端面試：項(xiàng)目中用過(guò)grid嗎？flex布局和grid布局有什么區(qū)別？

rid布局概念

CSS Gird已經(jīng)被W3C納入到css3的一個(gè)布局模塊中，被稱為CSS Grid Layout Module，一般習(xí)慣稱為網(wǎng)格布局。

網(wǎng)格布局可以將應(yīng)用程序分割成不同的空間，定義它們的大小、位置和層級(jí)。

簡(jiǎn)單來(lái)說(shuō)，網(wǎng)格布局就像表格一樣可以讓元素按列和行對(duì)齊排列，不同的是，網(wǎng)格布局沒(méi)有內(nèi)容結(jié)構(gòu)，比如一個(gè)網(wǎng)格布局的子元素可以定位自己的位置，可以是實(shí)現(xiàn)類似定位的效果。

兼容性:

測(cè)試地址：https://www.caniuse.com/

可以看到幾大瀏覽器都已經(jīng)支持了Grid布局，接下來(lái)我們來(lái)一步步的來(lái)玩轉(zhuǎn)Grid布局

grid vs flex

我們知道flex和grid都是css3新的布局方式，如果瀏覽器都支持兩種布局，你會(huì)選擇那種呢？當(dāng)我們了解兩者以后就能做出正確的選擇了。

flex布局是一維布局，grid布局是二維布局。

網(wǎng)格容器和網(wǎng)格項(xiàng)

我們知道給一個(gè)元素設(shè)置了display:flex就指定了flex彈性布局，實(shí)現(xiàn)grid布局一樣簡(jiǎn)單，給元素設(shè)置display:grid就可以了。

container 就是一個(gè)網(wǎng)格容器，里面的item就是網(wǎng)格項(xiàng)

網(wǎng)格術(shù)語(yǔ)

網(wǎng)格線 grid lines

網(wǎng)格線組成了網(wǎng)格，是網(wǎng)格水平和垂直的分界線。

網(wǎng)格軌道 grid track

就是兩條網(wǎng)格線之間的空間，可以理解成表格里面的行或者列，網(wǎng)格里面為grid-row和grid-column，網(wǎng)格軌道可以設(shè)置大小，來(lái)控制高度或者寬度。

上圖grid-column2和grid-column3之間的區(qū)域就是一個(gè)網(wǎng)格軌道

網(wǎng)格單元格 grid cell

就是四條網(wǎng)格線之間的空間，是最小的單位。

網(wǎng)格區(qū)域 area

也是四條網(wǎng)格線組成的空間，可能包含一個(gè)或者多個(gè)單元格。

實(shí)現(xiàn)一個(gè)grid布局

了解網(wǎng)格個(gè)相關(guān)概念，接下來(lái)我們來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的grid布局。

上面我們說(shuō)網(wǎng)格軌道的時(shí)候說(shuō)了可以給網(wǎng)格軌道設(shè)置大小，可以控制高度或者寬度。

我們來(lái)分析下上面的css

1、給grid元素設(shè)置了 display: grid來(lái)聲明使用grid布局

2、使用grid-template-columns來(lái)設(shè)置列寬，分別為 300px 200px 150px

3、使用grid-template-rows來(lái)設(shè)置行高，分別為150px 100px

以上代碼我們是實(shí)現(xiàn)了一個(gè)兩行三列的grid布局，此時(shí)瀏覽器顯示如下

進(jìn)階

單位 fr

grid-template-columns和grid-template-rows不只是可以設(shè)置具體的數(shù)值，還可以設(shè)置百分比、rem一類的，還可以設(shè)置一個(gè)新單位 fr，它是來(lái)干什么的呢？

我們先把上面demo里面的css文件改下

展示如下：

以上實(shí)現(xiàn)了彈性布局，fr用來(lái)實(shí)現(xiàn)彈性布局, 我們這里使用里repeat(2, 1fr),表示重復(fù)兩次，都是1fr。

grid-gap 網(wǎng)格項(xiàng)間隙

css修改如下

展示如下

網(wǎng)格布局屬性 grid-placement-properties

網(wǎng)格布局屬性主要用來(lái)放置容器內(nèi)的網(wǎng)格項(xiàng)目，就是單一項(xiàng)目的位置。網(wǎng)格布局屬性主要有以下四個(gè)屬性：

 1、grid-column-start 設(shè)置垂直方向的開始位置網(wǎng)格線
 2、grid-column-end 設(shè)置垂直方向的結(jié)束位置網(wǎng)格線
 3、grid-row-start 設(shè)置水平方向的開始位置網(wǎng)格線
 4、grid-row-end 設(shè)置水平方向的結(jié)束位置網(wǎng)格線

以上的簡(jiǎn)寫方式

 1、grid-column: grid-column-start / grid-column-end
 2、grid-row: grid-row-start / grid-row-end

終極簡(jiǎn)寫

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-colun-end

是不是有點(diǎn)蒙，我們可以大概看下，先來(lái)看deme

還是熟悉的html布局

先來(lái)看看我們的成果

顯示網(wǎng)格線的圖片

我們來(lái)分析下css

1、grid元素聲明grid布局，grid-template-columns和grid-template-rows來(lái)創(chuàng)建一個(gè)兩行三列的網(wǎng)格，但是渲染的結(jié)果卻是三行三列，為什么？我們先接著往下分析

2、css文件中單獨(dú)設(shè)置item-2網(wǎng)格項(xiàng)的位置，

 grid-column-start:2 垂直線開始位置為2
 grid-column-end:4垂直線結(jié)束位置為4
 grid-row-start:1 水平線開始位置為1
 grid-row-end:2 水平線結(jié)束位置為2

3、通過(guò)單獨(dú)設(shè)置item-2的位置，把本身要在第一行的item-3給擠下來(lái)了，然后 3、4、5按照300 200 150 排列

4、這時(shí)候兩件三列排列完了，但是還有個(gè)元素，此時(shí)剩下的元素就會(huì)獨(dú)自占一行的位置，它的大小一樣會(huì)按照網(wǎng)格容器定義的行高列寬來(lái)渲染

5、最后我們給item-6來(lái)設(shè)置了終極簡(jiǎn)寫方式，

終極簡(jiǎn)寫：行開始 / 列開始 / 行結(jié)束 / 列結(jié)束，然后我們把位置對(duì)應(yīng)上

 grid-area:3 / 1 / 4 / 4

通過(guò)設(shè)置網(wǎng)格項(xiàng)樣式屬性，我們可以就實(shí)現(xiàn)很多復(fù)雜的布局結(jié)構(gòu)了。

幾種布局

最后我們結(jié)合上面所學(xué)到的實(shí)現(xiàn)幾個(gè)常見布局

1、左右固定，中間自適應(yīng)

設(shè)置網(wǎng)格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就可以實(shí)現(xiàn)，再簡(jiǎn)單不過(guò)了

效果：

2、九宮格

使用grid-gap設(shè)置網(wǎng)格項(xiàng)間距使用fr來(lái)平分

顯示如下

3、圣杯、雙飛翼

使用grid-area設(shè)置header元素和footer元素位置，結(jié)合grid-template-columns和grid-template-rows實(shí)現(xiàn)布局

效果圖：

、摘要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁(yè)前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

2）輸入英文的網(wǎng)頁(yè)名字，盡量不要輸入中文/特殊字符

3. HTML格式說(shuō)明

當(dāng)雙擊打開我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

在開始開發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁(yè)開發(fā)

1. body部分

根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網(wǎng)頁(yè)測(cè)試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到的網(wǎng)頁(yè)內(nèi)容從上到下顯示

3. head部分

首先我們簡(jiǎn)要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(yīng)class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運(yùn)行結(jié)果：

2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運(yùn)行結(jié)果：

3）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運(yùn)行結(jié)果：

五、總結(jié)

今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。

者的區(qū)別描述：

flex：將對(duì)象作為彈性伸縮盒顯示
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示

一句話來(lái)描述就是當(dāng)Flex Box 容器沒(méi)有設(shè)置寬度大小限制時(shí)，當(dāng)display 指定為 flex 時(shí)，F(xiàn)lexBox 的寬度會(huì)填充父容器，當(dāng)display指定為 inline-flex 時(shí)，F(xiàn)lexBox的寬度會(huì)包裹子Item，如下圖所示：

對(duì)應(yīng)的代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex 容器*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex容器-->
<div class="flex__container">

  <!--Flex容器中的子Item-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>

完畢

在線咨詢

上一篇：移動(dòng)端購(gòu)物商城(微信小程序+VUE移動(dòng)端)功能介紹
下一篇：HTML5版《星際爭(zhēng)霸》下載：用Win10瀏覽器迎戰(zhàn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端面試：項(xiàng)目中用過(guò)grid嗎？flex布局和gri

rid布局概念

網(wǎng)格術(shù)語(yǔ)

進(jìn)階

、摘 要

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

2. 創(chuàng)建HTML文件

3. HTML格式說(shuō)明

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁(yè)開發(fā)

1. body部分

2. 網(wǎng)頁(yè)測(cè)試

3. head部分

五、總 結(jié)

您的項(xiàng)目需求

、摘要

五、總結(jié)