Web開發(fā)常用布局方式總結(jié)

網(wǎng)絡(luò)圖片

一.概述

無論是前端還是客戶端開發(fā)都離不開頁面的展示，而頁面是由布局和各種組件構(gòu)成的台囱。布局好比是建筑里的框架，而組件則相當(dāng)于建筑里的磚瓦读整。組件按照布局的要求依次排列簿训，就組成了用戶所看見的界面。比如Android開發(fā)者常用的布局方式有:線性布局(LinearLayout)、相對布局(RelativeLayout)强品、絕對布局(AbsoluteLayout)豺总、網(wǎng)格布局(GridLayout)等，IOS開發(fā)者常用的布局方式：手寫Frame择懂、自動布局(AutoLayout)、xib另玖、storyboard等方式困曙，我們這里主要介紹前端的布局方式。雖然目前大多數(shù)網(wǎng)站的構(gòu)建都是通過成熟的框架搭建的谦去，但是作為前端開發(fā)的基礎(chǔ)慷丽，學(xué)習(xí)了解一下布局還是很有必要的。

頁面布局(Layout):就是對頁面的文字鳄哭、圖形或表格進(jìn)行排布要糊、設(shè)計. --- 知乎

研究布局的目的是讓我們的頁面盡可能的還原UI設(shè)計給我們的設(shè)計圖，適配各種尺寸的屏幕妆丘，使其在各種尺寸屏幕上能很好地顯示出我們的視圖锄俄。

我們來看下我們Web開發(fā)中常用的幾種布局類型：

二.布局類型

1. 普通流布局

這是頁面默認(rèn)布局的方式，每個元素都有默認(rèn)空間勺拣，每個元素都是在父元素的左上角出現(xiàn)的,頁面中的塊元素都是按照從上到下的方式出現(xiàn)奶赠，每個塊元素獨占一行,頁面中行內(nèi)元素都是從左到右的方式排列.
每個元素都有一個默認(rèn)的 display 值，這與元素的類型有關(guān)药有。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline 毅戈。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內(nèi)元素愤惰。比如 div 是一個標(biāo)準(zhǔn)的塊級元素,頁面在進(jìn)行渲染時候苇经，遇到塊級元素會另起一行，而行內(nèi)元素會在當(dāng)前行進(jìn)行展示宦言。舉個簡單的例子：

html
<head>
      <title>標(biāo)題</title>
      <style>
          * {
              padding: 0;
              margin: 0;
              box-sizing: border-box;
          }
          body {
              background-color: white;
          }
          div {
              border: 1px solid red;
          }
          span {
              border: 1px solid green;
          }
          body :nth-child(4) {
              display: inline-block;
              background-color:salmon;
          }
      </style>
  </head>
  <body>
      <div>這是一個div塊元素</div>
      <span>這是一個行內(nèi)元素</span>
      <span>這是另一個行內(nèi)元素</span>
      <div>
          這是行內(nèi)塊元素
      </div>
      <div>這是還是一個div塊元素</div>
  </body>

圖片1

可以看到div元素是單獨占一行的扇单，而行內(nèi)元素span不會換行。其他常用的塊級元素包括 p蜡励、 h1——h6令花、form 以及Html5中的新元素： header 、 footer 凉倚、 section 等等兼都。常用的行內(nèi)元素a、input稽寒、img扮碧、label等。
display 的取值除了為block 跟inline 外還可以取值inline-block,它表示行內(nèi)塊元素，如果一個塊元素的display屬性取值為inline-block慎王，那么他就不在換行蚓土，比如我們這里的第二個div元素。如果一個行內(nèi)元素display取值為inline-block那么它就具有了塊元素的一些特性赖淤，例如我們可以改變它的尺寸蜀漆。
另一個常用的display值是 none。一些特殊元素的默認(rèn)display 值是它咱旱，例如 script 确丢。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。它和 visibility 屬性不一樣吐限。把 display 設(shè)置成 none 元素不會占據(jù)它本來應(yīng)該顯示的空間鲜侥，但是設(shè)置成 visibility: hidden; 還會占據(jù)空間。
display 還有一些其他取值诸典，可以看這里

2. 浮動布局

屬性：float
取值：
none: 默認(rèn)描函，無浮動
left: 左浮動，讓元素在父元素的左邊狐粱，或者挨著已有的浮動元素
right: 右浮動,讓元素在父元素的右邊舀寓，或者挨著已有的浮動元素
我們看下它如何使用,正常情況下的布局：

 <!DOCTYPE html>
<html>
    <head>
        <title>正常布局</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                background-color: wheat;
            }
            .left {
                width: 100px;
                height: 200px;
                background-color: rosybrown;
            }
            .right {
                width: 100px;
                height: 200px;
                background-color: saddlebrown;
            }
            .last {
                width: 100px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">左側(cè)</div>
            <div class="right">右側(cè)</div>
        </div>
        <div class="last">后面</div>
    </body>
</html>

圖片2

現(xiàn)在我們分別給.left 跟.right 添加浮動屬性,添加下面代碼

.left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: rosybrown;
   }
.right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: saddlebrown;
}

圖片3

看下頁面效果，左右兩個模塊倒是符合我們的預(yù)期肌蜻，但是container元素的背景沒有了基公，我們檢查下元素，可以看到container的高度變成了0宋欺，last只展示了文字轰豆，背景沒有了。這就說到float屬性的特點了：

特點：

元素將被排除在文檔流之外齿诞，不在占據(jù)頁面的空間酸休。其他未浮動元素將會向前占位。
浮動元素會偷昏荆靠在父元素的左邊或者右邊斑司，或者其他浮動元素的邊緣上。
文本行內(nèi)文字都是采用環(huán)繞方式排列的但汞，不會被浮動元素壓地下宿刮，而是會巧妙的避開浮動元素。
解決浮動帶來的影響
(1)可以直接設(shè)置父元素的高度私蕾，比如直接添加height:300px;
(2)為父元素設(shè)置overflow 取值 hidden或者auto
(3)使用clear屬性僵缺，取值both可以解決左右浮動帶來的影響。這里注意：這里要給contariner容器添加子元素
(4)在容器內(nèi)添加一個CSS偽元素踩叭，并將其clear屬性設(shè)置為both磕潮。

<div class="container">
    <div class="left">左側(cè)</div>
    <div class="right">右側(cè)</div>
    <div style="clear:both"></div>
</div>

或者是

.container::after {
  content: "";
  display: table;
  clear: both;
}

看下效果翠胰，符合我們的預(yù)期了

tupian3

實際上浮動最主要的作用:是可以使塊級元素在一行內(nèi)顯示。并且可以使文字可以環(huán)繞浮動元素進(jìn)行排列自脯。

3. 定位布局

屬性：position之景，默認(rèn)值:static,根據(jù)其取值的的不同分為:
相對定位：position:relative;
絕對定位：position:absolute;
固定定位:position:fixed;
只要是元素的position 屬性取值不為static,那么這個元素就被稱為已定位元素。這里需要注意膏潮，后面在介紹這幾種定位時锻狗，已定位元素會對他本身的位置有所影響。
偏移屬性： top焕参、left屋谭、right、bottom龟糕，取值是以px為單位的數(shù)值,取值可以是正數(shù)也可以是負(fù)數(shù),分別對應(yīng)不同方向的偏移
top:取值為正，向下移動悔耘，取值為負(fù)數(shù)讲岁，向上移動
bottom:取值為正，向上移動衬以，負(fù)值向下移動缓艳。
left:取值為正，右移動看峻，負(fù)值左移動
right:取值為正左移動阶淘，負(fù)值右移動

如何記憶：可以參考下面的圖例，取值為正數(shù)時互妓，都是向元素的內(nèi)部進(jìn)行靠攏溪窒，取值為負(fù)數(shù)時候都是向遠(yuǎn)離元素的位置移動。

tupian4

(1)相對定位`relative`

元素相對于他原來的位置進(jìn)行距離偏移

用法：position:relative;配合 top冯勉、left澈蚌、right、bottom進(jìn)行位置的微調(diào)
我們還是以上面的正常文檔流布局為例,現(xiàn)在我們想讓右側(cè)塊跟左側(cè)塊在一行顯示灼狰，并且在左側(cè)塊的右邊顯示宛瞄，實現(xiàn)下圖的效果

pic5

那么我們可以設(shè)置.right的布局如下

.right {
    position: relative;
    top: -100px; 
    left: 50px; 
    width: 50px;
    height: 100px;
    background-color: saddlebrown;
}

(2)絕對定位`absolute`

元素會相對于離他最近的已定位的(三種定位方式的一中)祖先元素去實現(xiàn)位置的初始化跟偏移,祖先元素就是本元素的父級元素。如果沒有已定位的祖先元素交胚，那就相對于body去實現(xiàn)位置的初始化跟偏移份汗。絕對定位元素會變成塊級元素。

用法：position:absolute;配合 top、left等缀、right霹抛、bottom進(jìn)行位置的微調(diào)
現(xiàn)在我們想讓右側(cè)塊塊疊加在左側(cè)塊之上顯示，實現(xiàn)下圖的效果轩猩；

pic7

那么我們可以設(shè)置.right的布局如下

.right {
    position: absolute;
    top: 50px;
    left: 0;
    width: 50px;
    height: 100px;
    background-color: saddlebrown;
}

可以看到當(dāng)子元素元素的postion屬性設(shè)置為absolute后原先父元素的高度變化了，說明.right脫離了文檔流，不再占據(jù)頁面空間均践。注意這里top: 50px;的改變是相對于body改變的晤锹，其初始化位置為文檔流的左上角，因為其父元素container并不是已定位的元素彤委。

(3)固定定位`fixed`

固定定位（position:fixed）元素會相對于視窗來定位鞭铆，這意味著即便頁面滾動，它還是會停留在相同的位置焦影。和 relative 一樣车遂， top 、 right 斯辰、 bottom 和 left 屬性都可用舶担。

我們還是拿上面的例子，我們將last固定在頁面的右下角彬呻，設(shè)置last的CSS如下

.last {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 75px;
    background-color: red;
}

注意position:fixed的元素也會脫離文檔流衣陶。

(4)定位補充

一旦將元素設(shè)置已定位元素(position的取值不為static)，元素可能會出現(xiàn)堆疊效果闸氮，堆疊效果的屬性：z-index,取值：無單位的數(shù)子剪况，數(shù)子越大越靠上

我們以上面絕對定位的例子來說明，設(shè)置了right為絕對定位后,right在left的上面蒲跨，此時如果想讓left在上,right在下译断，實現(xiàn)下面效果

pic8

設(shè)置left的CSS代碼

.left {
    position: relative;
    z-index: 10;
    width: 50px;
    height: 100px;
    background-color: rosybrown;
}

注意：只有已經(jīng)定位的元素可以使用z-index，如果不設(shè)置position: relative;是沒有效果的或悲，父子元素之間無法調(diào)整堆疊效果孙咪，子元素壓在父上。

4. flex布局

flex布局又叫彈性布局,是一種為一維布局而設(shè)計的布局方法巡语。一維的意思是你希望內(nèi)容是按行或者列來布局该贾。你可以使用display:flex來將元素變?yōu)閺椥圆季帧Ｎ覀冎苯涌蠢樱?br> 實現(xiàn)7個item橫向排列

圖片

<!DOCTYPE html>
<html>
    <head>
        <title>flex布局2</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-end;
                background-color: wheat;
                flex-wrap: wrap;
            }
           .item {
               width: 100px;
               height: 100px;
               border: 1px solid royalblue;
               text-align: center;
               line-height: 100px;
               margin: 10px 10px;
           }
           .item6 {
               flex: 1;
           }
           .item7 {
               flex: 2;
           }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="item0 item">item0</div>
            <div class="item1 item">item1</div>
            <div class="item2 item">item2</div>
            <div class="item3 item">item3</div>
            <div class="item4 item">item4</div>
            <div class="item5 item">item5</div>
            <div class="item6 item">item6</div>
            <div class="item7 item">item7</div>
        </div>
    </body>
</html>

上面的代碼基本基本涵蓋了我們常用的flex的屬性

display:flex: 設(shè)置container容器為彈性布局
flex-direction:決定主軸的方向,項目橫向或是縱向排列
取值：row | row-reverse | column | column-reverse;
row（默認(rèn)值）：主軸為水平方向捌臊，起點在左端杨蛋。
row-reverse：主軸為水平方向，起點在右端理澎。
column：主軸為垂直方向逞力，起點在上沿。
column-reverse：主軸為垂直方向糠爬，起點在下沿寇荧。
justify-content: 定義Item在主軸上如何對齊。
取值：flex-start | flex-end | center | space-between | space-around;
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊执隧，項目之間的間隔都相等揩抡。
space-around：每個項目兩側(cè)的間隔相等户侥。所以，項目之間的間隔比項目與邊框的間隔大一倍峦嗤。
align-items:定義Item在交叉軸上如何對齊蕊唐。
取值：align-items: flex-start | flex-end | center;
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊烁设。
center：交叉軸的中間點對齊替梨。
flex-wrap:一條軸線上放不下，決定其是否換行
取值: nowrap(不換行) | wrap(換行)
flex 屬性：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫装黑，默認(rèn)值為0 1 auto副瀑。
flex-grow: 屬性定義項目的放大比例，默認(rèn)為0恋谭，即如果存在剩余空間糠睡，也不放大。取值越大疚颊，占用剩余空間越大狈孔。
flex-shrink: 屬性定義了項目的縮小比例，默認(rèn)為1串稀，即如果空間不足，該項目將縮小狮杨。
flex-basis:屬性指定了flex元素在主軸方向上的初始大小

這里設(shè)置item6 與 item7 的flex為1和2母截，表示當(dāng)前軸剩余的空間item6占1/3,item7占2/3.

我們訪問caniuse查看瀏覽器對它支持情況,可以看到目前絕大多數(shù)瀏覽器是支持這個屬性的。

pic9

更多的關(guān)于flex的屬性可以查看這里：flex布局

5. grid布局

grid布局又叫網(wǎng)格布局,講到布局橄教，我們就會想到 flex布局清寇，甚至有人認(rèn)為既然有flex布局了，似乎沒有必要去了解Grid布局护蝶。但flex布局和Grid布局有實質(zhì)的區(qū)別华烟，那就是flex 布局是一維布局，Grid布局是二維布局持灰。flex布局一次只能處理一個維度上的元素布局盔夜，一行或者一列。Grid布局是將容器劃分成了“行”和“列”堤魁，產(chǎn)生了一個個的網(wǎng)格喂链，我們可以將網(wǎng)格元素放在與這些行和列相關(guān)的位置上，從而達(dá)到我們布局的目的妥泉⊥治ⅲ看下面的例子

圖片

<!DOCTYPE html>
<html>
    <head>
        <title>grid2布局</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                grid-auto-rows: minmax(100px,auto);
                grid-gap: 10px;
                background-color: skyblue;
            }
            .item {
                border: 1px solid cyan;
                text-align: center;
            }
            .item0{
                background-color: slateblue;
                grid-row: 1/2;
                grid-column: 1/5;
            }
            .item1 {
                background-color: slategray;
                grid-row: 2/3;
                grid-column: 1;
            }
            .item2 {
                background-color: springgreen;
                grid-row: 2/3;
                grid-column: 2/3;
            }
            .item3 {
                background-color: teal;
                grid-row: 2/3;
                grid-column: 3/4;
           }
            .item4 {
                background-color: wheat;
                grid-row: 2/4;
                grid-column: 4/5;
            }
            .item5 {
                background-color: #BEE7E9;
                grid-row: 3/4;
                grid-column: 1/3;
            }
            .item6{
                background-color: #E6CEAC;
                grid-row: 3/4;
                grid-column: 3/4;
            }
            .item7{
                background-color: #ECAD9E;
                grid-row: 4/5;
                grid-column: 1/5;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item0 item">item0</div>
            <div class="item1 item">item1</div>
            <div class="item2 item">item2</div>
            <div class="item3 item">item3</div>
            <div class="item4 item">item4</div>
            <div class="item5 item">item5</div>
            <div class="item6 item">item6</div>
            <div class="item7 item">item7</div>
        </div>
    </body>
</html>

上面的代碼基本基本涵蓋了我們常用的grid的屬性

display: grid: 設(shè)置container容器為網(wǎng)格布局
grid-template-columns與grid-template-rows:分別設(shè)置網(wǎng)格的列寬與行高，取值有多中形式例如：

  /* 聲明了三列盲链，寬度分別為 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  /*  聲明了兩行蝇率，行高分別為 50px 50px  */
  grid-template-rows: 50px 50px;

或者是這樣像我們的例子中使用repeat()函數(shù)進(jìn)行賦值迟杂，該函數(shù)接受兩個參數(shù)，第一個參數(shù)是重復(fù)的次數(shù)本慕，第二個參數(shù)是所要重復(fù)的值排拷。我們的例子中grid-template-columns: repeat(4,1fr); 出現(xiàn)了一個新的單位fr，fr代表網(wǎng)格容器中可用空間的一等份间狂，類似于flex的flex-grow攻泼。如果這樣取值grid-template-columns: 200px 1fr 2fr 表示第一個列寬設(shè)置為 200px，后面剩余的寬度分為兩部分鉴象，寬度分別為剩余寬度的 1/3 和 2/3忙菠。

grid-auto-rows 與 grid-auto-columns: 表示超出我們沒有定義網(wǎng)絡(luò)的寬度跟高度取值。例如上面的例子grid-template-columns: repeat(4,1fr); 我們只是顯示的指定了列的個數(shù)纺弊，以及寬度牛欢，并沒有指定行高，那么grid會取grid-auto-rows: minmax(100px,auto);的值來作為行高淆游。minmax()函數(shù)產(chǎn)生一個長度范圍傍睹，表示長度就在這個范圍之中都可以應(yīng)用到網(wǎng)格項目中，它接受兩個參數(shù)犹菱，分別為最小值和最大值拾稳。
grid-gap: 表示網(wǎng)格間的間隙大小，也可以單獨這行跟列的間隙：grid-row-gap 屬性腊脱、grid-column-gap.
grid-row和 grid-column: 表示單個項目的四個邊框的起始網(wǎng)格線跟結(jié)束網(wǎng)格線访得，從而確定單個網(wǎng)格的大小跟位置。我們將項目化分為四行四列的網(wǎng)格陕凹，那么橫向網(wǎng)格線為從1-5悍抑，縱向網(wǎng)格線也為從1-5，這里item0的取值grid-row: 1/2;grid-column: 1/5;表示：行高從第一根網(wǎng)格線到第二跟網(wǎng)格線杜耙，列寬度：從第一根網(wǎng)格線到第五根網(wǎng)格線搜骡。

看下它的瀏覽器支持情況,總體兼容性還不錯，但在IE10以下不支持.

pic10

更多的關(guān)于grid的屬性可以查看這里：grid布局

三佑女、布局的應(yīng)用

通過上面的學(xué)習(xí)我們了解了Web開發(fā)常用的幾種布局方式记靡，下面我們將這些布局方式來應(yīng)用到我們的實際開發(fā)中，我們就以最常見的幾種布局方式來說明

1.雙欄目布局實現(xiàn)

雙欄布局在我么的Web開發(fā)中間經(jīng)常用到团驱，例如下面的CSDN的內(nèi)容詳情頁簸呈。主要特點：一側(cè)欄固定，另一側(cè)欄寬度自適應(yīng)店茶。

pic21

我們使用float+margin的方式去實現(xiàn)蜕便，左側(cè)欄浮動，右側(cè)設(shè)置左外邊距贩幻。

<!DOCTYPE html>
<html>
    <head>
        <title>雙欄目布局</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                background-color: white;
            }
            .left {
                float: left;
                width: 200px;
                height: 200px;
                background-color: rosybrown;
            }
            .right {
                margin-left: 210px;
                height: 100px;
                background-color: saddlebrown;
            }
            .last {
                height: 30px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">左側(cè)</div>
            <div class="right">右側(cè)</div>
            <div style="clear:both"></div>
        </div>
        <div class="last">后面內(nèi)容</div>
    </body>
</html>

實現(xiàn)效果

pic34

注意要給container添加為內(nèi)容空的子元素<div style="clear:both"></div>轿腺，清除浮動帶來的影響两嘴。

2.三欄目布局實現(xiàn)

三欄布局也是我們經(jīng)常遇到的布局方式，它的特點主要是：兩邊定寬族壳，中間自適應(yīng)憔辫。有多種方式實現(xiàn)三欄布局，我們這里介紹其中四種方式

buj

(1)position + margin 實現(xiàn)

實現(xiàn)思路：

設(shè)置父元素為相對定位仿荆，左右兩欄采用絕對定位贰您，分別固定于頁面的左右兩側(cè)
中間的主體欄用左右margin值撐開距離

.box {
     /*父元素設(shè)置相對定位，否則左右欄會相對Body元素進(jìn)行位置的偏移*/
     position: relative;
     background-color:wheat;
}
.middle {
     height: 100px;
     margin-left: 110px;
     margin-right: 110px;
     background-color:royalblue;
}
.left {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100px;
     height: 100px;
     background-color:salmon;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color:sandybrown;
}

<div class="box">
   <div class="left">左邊</div>
   <div class="middle">中間</div>
   <div class="right">右邊</div>
</div>
<div>尾部內(nèi)容</div>

看下實現(xiàn)效果

yup

(2)圣杯布局

實現(xiàn)思路：

中間元素占據(jù)第一位置優(yōu)先渲染拢操，設(shè)置該元素 width 為 100%
左中右三個元素分別左浮動,并且進(jìn)行清除浮動帶來的影響
左元素設(shè)置左邊距為-100%以使得左元素上升一行并且處于最左位置锦亦，右元素設(shè)置左邊距為自身寬度的負(fù)值使得右元素上升一行處于最右位置。
設(shè)置父元素的左右 padding 為左右兩個元素留出空間令境，以展示中間元素內(nèi)容杠园。
設(shè)置左右元素為相對定位，左元素的 left 和右元素的 right 為內(nèi)邊距的寬度的負(fù)值舔庶。
代碼實現(xiàn)

<body>
    <div class="box">
       <div class="middle">中間</div>
       <div class="left">左邊</div>
       <div class="right">右邊</div>
       <div style="clear: both;"></div>
   </div>
<div class="last">后面</div>
</body>

CSS

body {
     /* 設(shè)置body的最小寬度 */
     min-width: 800px;
}
.box {
     padding: 0 210px;
     width: 100%;
     background-color:red;
}
.middle {
     float: left;
     width: 100%;
     height: 200px;
     background-color:royalblue;
}
 .left {
     float: left;
     width: 200px;
     height: 200px;
     background-color:salmon;
     /*左邊距為-100%以使得左元素上升一行并且處于最左位置*/
     margin-left: -100%;
     /*相對定位*/
     position: relative;
     left: -210px;
}
.right {
     float: left;
     width: 200px;
     height: 200px;
     background-color:sandybrown;
     /*元素設(shè)置左邊距為自身寬度的負(fù)值使得右元素上升一行處于最右位置*/
     margin-left: -200px;
     /*相對定位*/
     position: relative;
     right: -210px; 
}
.last {
     background-color:thistle;
     height: 40px;
}

效果

pic2

(3)雙飛翼布局

實現(xiàn)思路：

中間采用嵌套子元素方法,寬度自適應(yīng)
左中右三個元素分別左浮動,并且進(jìn)行清除浮動帶來的影響
左元素設(shè)置左邊距為-100%以使得左元素上升一行并且處于最左位置抛蚁，右元素設(shè)置左邊距為自身寬度的負(fù)值使得右元素上升一行處于最右位置。
設(shè)置中間元素的子元素左右邊距為左右元素留空位惕橙，以展示中間元素內(nèi)容瞧甩。
代碼實現(xiàn)

<body>
    <div class="container">
        <div class="middle">中間</div>
    </div>
    <div class="left">左側(cè)</div>
    <div class="right">右側(cè)</div>
    <div style="clear: both;"></div>
    <div class="last">尾部</div>
</body>

CSS

body {
   min-width: 800px;
}
.container{
    float: left;
    /* 整個容器大小 */
    width: 100%;
    height: 200px;
    background: #ddd;
}
.container .middle{
    height: 200px;
    /* 設(shè)置左右邊距 */
    margin: 0 160px;
    background-color:slateblue;
}
.left{
    float: left;
    width: 150px;
    height: 200px;
    background-color: rosybrown;
    margin-left: -100%;
}
.right{
    float: left;
    width: 150px;
    height: 200px;
    background-color:saddlebrown;
    margin-left: -150px;
}
.last {
     background-color: tomato;
}

效果

pic

圣杯布局跟雙飛翼布局的實現(xiàn)上，在前部分是一樣的弥鹦。同樣都是左右欄定寬肚逸，中間欄自適應(yīng)。采用浮動和負(fù)邊距使左右欄與中間欄并排惶凝。不同之處大部分在于中間元素的的展示方式上吼虎。圣杯布局采用父元素設(shè)置內(nèi)邊距的方法犬钢，左右元素設(shè)置相對定位輔助苍鲜。而雙飛翼布局在中間采用嵌套子元素方法，通過設(shè)置子元素外邊距來展示玷犹。

(4)flex布局實現(xiàn)

對比前面兩中實現(xiàn)直接實用flex布局能夠比較容易的實現(xiàn)三欄布局

<div class="container">
     <div class="left">左側(cè)</div>
     <div class="middle">中間</div>
     <div class="right">右側(cè)</div>
</div>

CCS

.container {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     background-color: wheat;
     /* height: 100vh; */
}
.left {
     width: 150px;
     height: 200px;
     background-color: rosybrown;
}
.right {
     width: 150px;
     height: 200px;
     background-color: saddlebrown;
}
.middle {
     /* 寬度沾滿剩下的整個區(qū)域 */
     flex: 1;
     height: 200px;
     background-color: seagreen;
}

pic

3.響應(yīng)式布局

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念混滔，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本歹颓。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的坯屿。

saumang

例如三星網(wǎng)站的設(shè)計,當(dāng)我們改變?yōu)g覽器大小時，頁面的布局會發(fā)生相應(yīng)的改變巍扛，那么這些變化是如何實現(xiàn)的呢?我們介紹三種實現(xiàn)方式

(1)媒體查詢`CSS3-Media Query`

使用 @media查詢领跛，可以針對不同的媒體類型定義不同的樣式。當(dāng)你重置瀏覽器大小的過程中撤奸，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面吠昭。
語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype: 媒體類型, 例如：screen:計算機屏幕（默認(rèn)值）喊括，tv:電視類型設(shè)備等
and|not|only :邏輯操作符
and:用來把多個媒體屬性組合起來，合并到同一條媒體查詢中
not:用來對一條媒體查詢的結(jié)果進(jìn)行取反
only:表示僅在媒體查詢匹配成功時應(yīng)用指定樣式
media feature: 多數(shù)媒體屬性矢棚，帶有“min-”和“max-”前綴郑什，用于表達(dá)“大于等于”和“小于等于”。例如width | min-width | max-width,height | min-height | max-height,aspect-ratio | min-aspect-ratio | max-aspect-ratio等

適配進(jìn)行響應(yīng)式開發(fā)時往往需要針對不同的屏幕添加多個斷點,看個例子

toppic

<div class="container">
   <div class="item item0">item0</div>
   <div class="item item1">item1</div>
   <div class="item item2">item2</div>
   <div class="item item3">item3</div>
   <div class="item item4">item4</div>
   <div class="item item5">item5</div>
   <div class="item item6">item6</div>
   <div class="item item7">item7</div>
</div>

CSS

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body {
        background-color: white;
    }
    /* 當(dāng)屏幕尺寸大于等于1025 樣式 */
    @media only screen and (min-width: 1025px){
        body {
            background-color: wheat;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 10px 30px;
        }
    }
    /** iPad 屏幕尺寸大于等于768 小于等于1024 豎屏**/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        body {
            background-color: rosybrown;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 5px 20px;
        }
    }
    /** iPhone 屏幕尺寸小于等于767 豎屏樣式**/
    @media only screen and (max-width: 767px){
        body {
            background-color:royalblue;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 5px 10px;
        }
    }    
</style>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">這句代碼的作用是禁止用戶進(jìn)行手動的放大縮小頁面
設(shè)置了三個斷點蒲肋，根據(jù)不同的屏幕寬度展示不同的樣式蘑拯。
還需要注意@media 不支持IE9及以下的瀏覽器，如果要支持需要添加額外的代碼

  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

(2)grid實現(xiàn)響應(yīng)式布局

第二種方式主要是利用grid的特性來實現(xiàn)響應(yīng)布局兜粘。假如有這樣的需求：我們不希望Item過小申窘，需要有最小寬度限制，并且當(dāng)視口寬度增加時我們不希望看到右側(cè)有空白區(qū)域的出現(xiàn)妹沙。實現(xiàn)下面效果

pic

<!doctype html>
<html>
  <head>
     <title>響應(yīng)式布局2</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
       <style>
           * {
               padding: 0;
               margin: 0;
               box-sizing: border-box;
           }
           body {
               background-color: white;
           }
           .container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                grid-gap: 10px 20px;
                grid-auto-rows: 50px;
           }
           .item {
                border: 1px solid skyblue;
                text-align: center;
                margin: 10px 30px;
                height: 50px;
                line-height: 50px;
          } 
       </style>
  </head>
    <body>
        <div class="container">
            <div class="item item0">item0</div>
            <div class="item item1">item1</div>
            <div class="item item2">item2</div>
            <div class="item item3">item3</div>
            <div class="item item4">item4</div>
            <div class="item item5">item5</div>
            <div class="item item6">item6</div>
            <div class="item item7">item7</div>
        </div>
    </body>
</html>

關(guān)于grid的屬性我們再上面已經(jīng)介紹過了這里不再贅述偶洋。唯一沒有介紹的是auto-fit關(guān)鍵字，repeat()函數(shù)的作用是重復(fù)創(chuàng)建多個Item距糖，第一個參數(shù)數(shù)個數(shù)玄窝，第二個是大小，這里取值auto-fit的意思是數(shù)量是自適應(yīng)的悍引，只要容納得下恩脂，就會往上排列。

(3)Columns柵格系統(tǒng)

Columns柵格系統(tǒng)往往需要依賴某個UI庫趣斤，如Bootstrip或者是Element UI等俩块。

Bootstrap來自Twitter，是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架浓领。它提供了一套響應(yīng)式玉凯、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的改變联贩，系統(tǒng)會自動將視口分為最多12列漫仆。它根據(jù)當(dāng)前視口的大小添加多個媒體查詢斷點，可以讓開發(fā)者方便的根據(jù)視口大小調(diào)整每個網(wǎng)格所占整體視口的寬度泪幌。
Bootstrap(5.0)有六種默認(rèn)響應(yīng)尺寸：xs盲厌、sm、md祸泪、lg吗浩、xl、xxl,對應(yīng)關(guān)系如下

duandian

它的基本的網(wǎng)格結(jié)構(gòu)

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

使用規(guī)則

行必須放置在 .containerclass 內(nèi)没隘，以便獲得適當(dāng)?shù)膶R（alignment）和內(nèi)邊距（padding）
使用行來創(chuàng)建列的水平組懂扼，內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素
預(yù)定義的網(wǎng)格類右蒲，比如 .row 和 .col-xs-4阀湿，可用于快速創(chuàng)建網(wǎng)格布局屡限。
網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個可用的列來創(chuàng)建的。例如炕倘，要創(chuàng)建三個相等的列钧大，則使用三個 .col-xs-4。

例子：

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必須的 meta 標(biāo)簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .item {
            height: 50px;
        }
    </style>
  </head>
  <body>
      <div class="container">
          <div class="row g-1">
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 item bg-light border">item0</div>
          </div>
      </div>
  </body>
</html>

效果

pic

其他官方示例,Element UI的響應(yīng)式布局與Bootstrap是相似的工作原理罩旋，這里不再贅述啊央。
想了解更多關(guān)于Bootstrap和Element UI相關(guān)內(nèi)容點擊他們

四、總結(jié)

作為前端小白涨醋，學(xué)習(xí)完Html瓜饥、CSS、JavaScript等一堆東西浴骂，等到真正開始寫Web頁面還是一頭霧水乓土，回憶剛學(xué)習(xí)寫客戶端時肯定要從基礎(chǔ)的頁面布局來入手，于是有了這篇文章溯警。因此這篇文章主要面向的是前端初學(xué)者趣苏，還請大神勿噴。當(dāng)然由于作者水平有限梯轻，難免出現(xiàn)紕漏食磕，如有問題還請不吝賜教。文章涉及源碼
參考資料：
Bootstrap
Element UI
CSS布局
 Grid 布局完全指南

最后編輯于：2021.08.11 15:34:23

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末喳挑，一起剝皮案震驚了整個濱河市彬伦，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌伊诵，老刑警劉巖单绑，帶你破解...
沈念sama閱讀 219,539評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異曹宴，居然都是意外死亡搂橙，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,594評論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門浙炼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來份氧，“玉大人唯袄，你說我怎么就攤上這事弯屈。” “怎么了恋拷？”我有些...
開封第一講書人閱讀 165,871評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵资厉，是天一觀的道長。經(jīng)常有香客問我蔬顾，道長宴偿，這世上最難降的妖魔是什么湘捎？我笑而不...
開封第一講書人閱讀 58,963評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮窄刘，結(jié)果婚禮上窥妇，老公的妹妹穿的比我還像新娘。我一直安慰自己娩践，他們只是感情好活翩，可當(dāng)我...
茶點故事閱讀 67,984評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著翻伺，像睡著了一般材泄。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上吨岭，一...
開封第一講書人閱讀 51,763評論 1贊 307
城市分裂傳說
那天拉宗，我揣著相機與錄音，去河邊找鬼辣辫。笑死旦事，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的急灭。我是一名探鬼主播族檬，決...
沈念sama閱讀 40,468評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼化戳！你這毒婦竟也來了单料？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,357評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤点楼，失蹤者是張志新（化名）和其女友劉穎扫尖，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掠廓，經(jīng)...
沈念sama閱讀 45,850評論 1贊 317
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡换怖，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,002評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了蟀瞧。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沉颂。...
茶點故事閱讀 40,144評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖悦污，靈堂內(nèi)的尸體忽然破棺而出铸屉，到底是詐尸還是另有隱情，我是刑警寧澤切端，帶...
沈念sama閱讀 35,823評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布彻坛，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏昌屉。R本人自食惡果不足惜钙蒙，卻給世界環(huán)境...
茶點故事閱讀 41,483評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望间驮。院中可真熱鬧躬厌，春花似錦、人聲如沸竞帽。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,026評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽抢呆。三九已至煮嫌，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間抱虐，已是汗流浹背昌阿。一陣腳步聲響...
開封第一講書人閱讀 33,150評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留恳邀，地道東北人懦冰。一個月前我還...
沈念sama閱讀 48,415評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像谣沸，于是被迫代替她去往敵國和親刷钢。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,092評論 2贊 355

Web開發(fā)常用布局方式總結(jié)

一.概述

二.布局類型

1. 普通流布局

2. 浮動布局

3. 定位布局

(1)相對定位relative

(2)絕對定位absolute

(3)固定定位fixed

(4)定位補充

4. flex布局

5. grid布局

三佑女、布局的應(yīng)用

1.雙欄目布局實現(xiàn)

2.三欄目布局實現(xiàn)

(1)position + margin 實現(xiàn)

(2)圣杯布局

(3)雙飛翼布局

(4)flex布局實現(xiàn)

3.響應(yīng)式布局

(1)媒體查詢CSS3-Media Query

(2)grid實現(xiàn)響應(yīng)式布局

(3)Columns柵格系統(tǒng)

四、總結(jié)

推薦閱讀更多精彩內(nèi)容

(1)相對定位`relative`

(2)絕對定位`absolute`

(3)固定定位`fixed`

(1)媒體查詢`CSS3-Media Query`