前言

現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁(yè)面仔。或許是職責(zé)越來(lái)越大，整體的前端井噴式的發(fā)展，使我們只關(guān)注了js，而疏遠(yuǎn)了css和html。

其實(shí)，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過頭來(lái)思考一下，如果你看到一張?jiān)O(shè)計(jì)稿的時(shí)候，連布局都不清不楚，談何組件化呢。所以，我們需要在分清楚組件之前，先來(lái)分清楚布局。廢話說(shuō)了這么多，只是想告訴你，布局這個(gè)東西真的很重要。本篇內(nèi)容概括了布局的基礎(chǔ)+基本的PC端布局+移動(dòng)端適配等內(nèi)容。如果你喜歡我的文章，歡迎評(píng)論，歡迎Star~。歡迎關(guān)注我的github博客

正文

或許對(duì)于你來(lái)說(shuō)，喜歡js的背后，是看不懂css的深層。入門級(jí)的css非常簡(jiǎn)單，但是，精通它卻沒有想象的容易。我們本篇聊的是布局。前端開發(fā)，從拿到設(shè)計(jì)稿的那一刻，布局的思考就已經(jīng)開始了。

舉個(gè)例子，建筑師在設(shè)計(jì)房屋的時(shí)候，需要丈量開發(fā)地塊的長(zhǎng)度，以及每幢房屋相對(duì)于其他房屋的位置。

在css布局中，似乎也是這樣開始的。我們也會(huì)去區(qū)分每個(gè)元素的尺寸和定位，力爭(zhēng)完美的實(shí)現(xiàn)整個(gè)設(shè)計(jì)稿。所以，我們的布局應(yīng)該從定位和尺寸開始聊起

定位

定位的概念就是它允許你定義一個(gè)元素相對(duì)于其他正常元素的位置，它應(yīng)該出現(xiàn)在哪里，這里的其他元素可以是父元素，另一個(gè)元素甚至是瀏覽器窗口本身。還有就是浮動(dòng)了，其實(shí)浮動(dòng)并不完全算是定位，它的特性非常的神奇，以至于它在布局中被人廣泛的應(yīng)用。我們會(huì)在后文中專門提及它的。

談及定位，我們就得從position屬性說(shuō)起。你能準(zhǔn)確的說(shuō)出position的屬性值嗎？相信你可以完美地說(shuō)出這么六個(gè)屬性值：static、relative、absolute、fixed、sticky和inherit。

• static(默認(rèn))：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分；行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
• relative：元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。發(fā)生偏移的時(shí)候，可能會(huì)覆蓋其他元素。
• absolute：元素框不再占有文檔流位置，并且相對(duì)于包含塊進(jìn)行偏移(所謂的包含塊就是最近一級(jí)外層元素position不為static的元素)
• fixed：元素框不再占有文檔流位置，并且相對(duì)于視窗進(jìn)行定位
• sticky：(這是css3新增的屬性值)粘性定位，官方的介紹比較簡(jiǎn)單，或許你不能理解。其實(shí)，它就相當(dāng)于relative和fixed混合。最初會(huì)被當(dāng)作是relative，相對(duì)于原來(lái)的位置進(jìn)行偏移；一旦超過一定閾值之后，會(huì)被當(dāng)成fixed定位，相對(duì)于視口進(jìn)行定位。demo地址

簡(jiǎn)單地，介紹一下position的屬性值的含義后，在來(lái)看一下偏移量top、right、bottom、left四個(gè)屬性。

不清楚，當(dāng)初在初學(xué)css的時(shí)候，會(huì)不會(huì)與margin這個(gè)屬性混淆？其實(shí)，它們之間是很容易去辨識(shí)地。因?yàn)檫@四個(gè)屬性值，其實(shí)是，定位時(shí)的偏移量。偏移量不會(huì)對(duì)static的元素起到作用。而margin，相對(duì)應(yīng)的是盒子模型的外邊距，它會(huì)對(duì)每個(gè)元素框起到作用，使得元素框與其他元素之間產(chǎn)生空白。

下面：我們來(lái)看一下一些常用定位的偏移

• relative：它的偏移是相對(duì)于原先在文檔流中的位置，如圖：

  relative
  relative-offset

  這里設(shè)置了top：100px，left：100px。

• absolute：它的偏移量是相對(duì)于最近一級(jí)position不是static的祖先元素的

• fixed：它的偏移量是相對(duì)于視口的。

其實(shí)，這里說(shuō)描述的內(nèi)容，應(yīng)該都是需要理解的。這些相對(duì)于布局來(lái)說(shuō)是基礎(chǔ)的，同時(shí)也是非常重要的。需要注意的是，這里的偏移量其實(shí)已經(jīng)涉及到了接下來(lái)要說(shuō)的尺寸。在做自適應(yīng)布局設(shè)計(jì)時(shí)，往往希望這些偏移量的單位能夠使用百分比，或者相對(duì)的單位例如rem等。

尺寸

那之前上面談到過尺寸的單位——百分比。那么，下面部分我們就圍繞著尺寸單位展開。

尺寸，我們就應(yīng)該從單位聊起，對(duì)于px這個(gè)單位，做網(wǎng)頁(yè)的應(yīng)該在熟悉不過了，因此不多做介紹。

那么，我們可以來(lái)介紹一下下面幾個(gè)單位：

• 百分比：百分比的參照物是父元素，50%相當(dāng)于父元素width的50%
• rem：這個(gè)對(duì)于復(fù)雜的設(shè)計(jì)圖相當(dāng)有用，它是html的font-size的大小
• em：它雖然也是一個(gè)相對(duì)的單位，相對(duì)于父元素的font-size，但是，并不常用，主要是計(jì)算太麻煩了。

單位只是一個(gè)來(lái)定義元素大小的相應(yīng)參考。另一個(gè)概念，或許可以用房子來(lái)打一個(gè)比方，在早年每幢房子都會(huì)在房子的外圍建一層?xùn)艡冢沟谜粔K地區(qū)可以看成房子+內(nèi)部地塊+柵欄+外圍地塊的模型。而在css中，每個(gè)元素也會(huì)有盒子模型的概念。

盒子模型：每個(gè)元素，都會(huì)形成一個(gè)矩形塊，主要包括四部分：margin(外邊距)+border(邊框)+padding(內(nèi)邊距)+content(內(nèi)容)

css中存在兩種不同的盒子模型，可以通過box-sizing設(shè)置不同的模型。兩種盒子模型，主要是width的寬度不同。如圖：

content-box

這是標(biāo)準(zhǔn)盒子模型，可以看到width的長(zhǎng)度等于content的寬度；而當(dāng)將box-sizing的屬性值設(shè)置成border-box時(shí)，盒子模型的width=border+padding+content的總和。

可以看出，對(duì)于不同的模型的寬度是不同的。寬度默認(rèn)的屬性值是auto，這個(gè)屬性值會(huì)使得內(nèi)部元素的長(zhǎng)度自動(dòng)填充滿父元素的width。如圖：

width-auto

但是，height的屬性值也是默認(rèn)的auto，為什么沒有像width一樣呢？

其實(shí)，auto這個(gè)屬性值表示的是瀏覽器自動(dòng)計(jì)算。這種自動(dòng)計(jì)算，需要一個(gè)基準(zhǔn)，一般瀏覽器都是允許高度滾動(dòng)的，所以，會(huì)導(dǎo)致一個(gè)問題——瀏覽器找不到垂直方向上的基準(zhǔn)。

同樣地道理也會(huì)被應(yīng)用在margin屬性上。相信如果考察居中時(shí)，水平居中你可能閉著眼睛都能寫出來(lái)，但是垂直居中卻繞著腦袋想。這是因?yàn)槿绻菈K級(jí)元素水平居中只要將水平方向上的margin設(shè)置成auto就可以了。但是，垂直方向上卻沒有這么簡(jiǎn)單，因?yàn)槟阍O(shè)置成auto時(shí)，margin為0。這個(gè)問題，還是需要仔細(xì)思考一下的。

到此為止，布局最基本的部分我們已經(jīng)將去大半，還有就是一塊浮動(dòng)。

浮動(dòng)

浮動(dòng)，這是一個(gè)非常有意思的東西，在布局中被廣泛的應(yīng)用。最初，設(shè)計(jì)浮動(dòng)時(shí)，其實(shí)并不是為了布局的，而是為了實(shí)現(xiàn)文字環(huán)繞的特效，如圖：

float

但是，浮動(dòng)并不是僅僅這樣而已。何為浮動(dòng)？浮動(dòng)應(yīng)該說(shuō)是‘自成一派’，類似于ps中的圖層一樣，浮動(dòng)的元素會(huì)在浮動(dòng)層上面進(jìn)行排布，而在原先文檔流中的元素位置，會(huì)被以某種方式進(jìn)行刪除，但是還是會(huì)影響布局。你可能會(huì)覺得有疑問，什么叫影響布局？我們可以來(lái)舉個(gè)例子：

首先，我們準(zhǔn)備兩個(gè)顏色塊，如圖：

浮動(dòng)前

之后我們將left的塊設(shè)置成左浮動(dòng)，如圖：

浮動(dòng)后

可以，發(fā)現(xiàn)雖然left塊因?yàn)樽蟾?dòng)，而使得原先元素在文檔流中占有的位置被刪除，但是，當(dāng)right塊補(bǔ)上原先的位置時(shí)，right塊中的字體卻被擠出來(lái)了。這就是所謂的影響布局。

浮動(dòng)為什么會(huì)被使用在布局中呢？因?yàn)樵O(shè)置浮動(dòng)后的元素會(huì)形成BFC（使得內(nèi)部的元素不會(huì)被外部所干擾），并且元素的寬度也不再自適應(yīng)父元素寬度，而是適應(yīng)自身內(nèi)容。這樣就可以，輕松地實(shí)現(xiàn)多欄布局的效果。

浮動(dòng)的內(nèi)容還需要介紹一塊——清除浮動(dòng)。可以看到，浮動(dòng)元素，其實(shí)對(duì)于布局來(lái)說(shuō)，是特別危險(xiǎn)的。因?yàn)槟憧赡苓@一塊做過浮動(dòng)，但未做清除，那么造成高度塌陷的問題。就是上面圖示的那種情況。

清除浮動(dòng)，最常用的方法有兩種:

• overflow: 將父元素的overflow，設(shè)置成hidden。
• after偽類：對(duì)子元素的after偽類進(jìn)行設(shè)置。

這里只是稍微的提上一嘴。下面我們正式來(lái)介紹一下網(wǎng)頁(yè)的布局，本篇最核心的東西。

最初的布局——table

最初的時(shí)候，網(wǎng)頁(yè)簡(jiǎn)單到可能只有文字和鏈接。這時(shí)候，大家最常用的就是table。因?yàn)閠able可以展示出多個(gè)塊的排布。

這種布局現(xiàn)在應(yīng)該不常用了，因?yàn)樵谛紊珕我粫r(shí)，使用起來(lái)方便。但是，現(xiàn)在的網(wǎng)頁(yè)變得越來(lái)越復(fù)雜，適配的問題也是越來(lái)越多，這種布局已經(jīng)不再時(shí)候了。

主要是div塊的出現(xiàn)，可以使得網(wǎng)頁(yè)進(jìn)行靈活的排布，使得網(wǎng)頁(yè)變得繁榮。這時(shí)，開發(fā)者也開始思索如何去更加清晰地分辨網(wǎng)頁(yè)的層次。接下來(lái)，我們可以看看有哪些比較出名的布局方式。

兩欄布局

是否記得，那些一邊主體內(nèi)容，一邊目錄的網(wǎng)頁(yè)，如圖：

兩欄布局

類似于上圖的布局，可以定義為兩欄布局。

兩欄布局：一欄定寬，一欄自適應(yīng)。這樣子做的好處是定寬的那一欄可以做廣告，自適應(yīng)的可以作為內(nèi)容主體。

實(shí)現(xiàn)的方式：

1. float + margin：

<body>
  <div class="left">定寬</div>
  <div class="right">自適應(yīng)</div>
</body>

.left{
  width: 200px;
  height: 600px;
  background: red;
  float: left;
  display: table;
  text-align: center;
  line-height: 600px;
  color: #fff;
}

.right{
  margin-left: 210px;
  height: 600px;
  background: yellow;
  text-align: center;
  line-height: 600px;
}

如圖所示：

兩欄布局

其他的方法：還可以使用position的absolute，可以使用同樣的效果

三欄布局

三欄布局，也是經(jīng)常會(huì)被使用到的一種布局。

它的特點(diǎn)：兩邊定寬，然后中間的width是auto的，可以自適應(yīng)內(nèi)容，再加上margin邊距，來(lái)進(jìn)行設(shè)定。

三欄布局可以有4種實(shí)現(xiàn)方式，每種實(shí)現(xiàn)方式都有各自的優(yōu)缺點(diǎn)。

1.使用左右兩欄使用float屬性，中間欄使用margin屬性進(jìn)行撐開，注意的是html的結(jié)果

<div class="left">左欄</div>
<div class="right">右欄</div>
<div class="middle">中間欄</div>

.left{
  width: 200px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 150px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}

first

缺點(diǎn)是：1. 當(dāng)寬度小于左右兩邊寬度之和時(shí)，右側(cè)欄會(huì)被擠下去；2. html的結(jié)構(gòu)不正確

2. 使用position定位實(shí)現(xiàn)，即左右兩欄使用position進(jìn)行定位，中間欄使用margin進(jìn)行定位

<div class="left">左欄</div>
<div class="middle">中間欄</div>
<div class="right">右欄</div>

.left{
    background: yellow;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: red;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

image

好處是：html結(jié)構(gòu)正常。

缺點(diǎn)時(shí)：當(dāng)父元素有內(nèi)外邊距時(shí)，會(huì)導(dǎo)致中間欄的位置出現(xiàn)偏差

3. 使用float和BFC配合圣杯布局

將middle的寬度設(shè)置為100%，然后將其float設(shè)置為left，其中的main塊設(shè)置margin屬性，然后左邊欄設(shè)置float為left，之后設(shè)置margin為-100%，右欄也設(shè)置為float：left，之后margin-left為自身大小。

<div class="wrapper">
    <div class="middle">
        <div class="main">中間</div>
    </div>
    <div class="left">
        左欄
    </div>
    <div class="right">
        右欄
    </div>
</div>

.wrapper{
    overflow: hidden;  //清除浮動(dòng)
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: red;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: yellow;
    margin-left: -200px;
}

bf-layout

缺點(diǎn)是：1. 結(jié)構(gòu)不正確 2. 多了一層標(biāo)簽

4. flex布局

<div class="wrapper">
    <div class="left">左欄</div>
    <div class="middle">中間</div>
    <div class="right">右欄</div>
</div>

.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 3000px;
    background: yellow;
}

first

除了兼容性，一般沒有太大的缺陷

三欄布局使用較為廣泛，不過也是比較基礎(chǔ)的布局方式。對(duì)于PC端的網(wǎng)頁(yè)來(lái)說(shuō)，使用較多，但是移動(dòng)端，本身寬度的限制，很難做到三欄的方式。因此，移動(dòng)端盛行的現(xiàn)在，我們應(yīng)該掌握一些自適應(yīng)布局技巧和flex等方式。

移動(dòng)端的時(shí)代

或許，手機(jī)占用了人們大部分的時(shí)間，對(duì)于前端工程師來(lái)說(shuō)，不僅需要會(huì)h5和大前端的技術(shù)，還需要去適配不同的手機(jī)屏幕。PC端稱王的時(shí)代已經(jīng)過去，現(xiàn)在要求的網(wǎng)頁(yè)都是需要能夠去適配PC和移動(dòng)端的。

之前，所聊的兩欄和三欄布局，一般只能在PC中去使用，在移動(dòng)端，由于屏幕尺寸有限，很難去做到類似的操作，所以，我們需要來(lái)了解新的東西。

1. 媒體查詢

如果你需要一張網(wǎng)頁(yè)能夠在PC和移動(dòng)端都能按照不同的設(shè)計(jì)稿顯示出來(lái)，那么你需要做的就是去設(shè)置媒體查詢。

媒體查詢的css標(biāo)識(shí)符是@media，它的媒體類型可以分為：

1. all， 所有媒體
2. braille 盲文觸覺設(shè)備
3. embossed 盲文打印機(jī)
4. print 手持設(shè)備
5. projection 打印預(yù)覽
6. screen 彩屏設(shè)備
7. speech ‘聽覺’類似的媒體類型
8. tty 不適用像素的設(shè)備
9. tv 電視

代碼示例：

@media screen {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
  p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
  p.test {font-weight:bold;}
}
/*移動(dòng)端樣式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

媒體查詢的主要原理：它像是給整個(gè)css樣式設(shè)置了斷點(diǎn)，通過給定的條件去判斷，在不同的條件下，顯示不同的樣式。例如：手機(jī)端的尺寸在750px，而PC端則是大于750px的，我們可以將樣式寫成：

@media screen and (min-width: 750px){
  .media{
    height: 100px;
    background: red;
  }
}

@media (max-width: 750px){
  .media{
    height: 200px;
    background: green;
  }
}

demo地址

效果圖：

小于750px

大于750px

flex彈性盒子

其實(shí)移動(dòng)端會(huì)經(jīng)常使用到flex布局，因?yàn)樵诤?jiǎn)單的頁(yè)面適配方面，flex可以起到很好的拉伸的效果。我們先看幾張圖體會(huì)一下：

flex盒子

flex盒子

flex盒子

可以從圖中看出，這個(gè)網(wǎng)頁(yè)不管屏幕分辨率怎么發(fā)生變化，它的高度和位置都不變，而且里面的元素排布也沒有發(fā)生變化，總是圖標(biāo)信息在左邊和薪資狀況在右邊。

這就是很明顯的，flex布局。flex可以在移動(dòng)端適配比較簡(jiǎn)單的，元素比較單一的頁(yè)面。

具體的flex布局內(nèi)容，在這里不詳細(xì)說(shuō)明。flex傳送門

rem適配

rem可以說(shuō)是移動(dòng)端適配的一個(gè)神器。類似于手淘等界面，都是使用的rem進(jìn)行的適配。這種界面有個(gè)特點(diǎn)就是頁(yè)面元素的復(fù)雜度比較高，而使用flex進(jìn)行布局會(huì)導(dǎo)致頁(yè)面被拉伸，但是上下的高度卻沒有變化等問題。示例圖：

rem適配

rem適配

具體的講解可以看這篇比較好的文章。rem傳送門

總結(jié)

分析到這里，布局的很多東西都已經(jīng)非常的清晰了。相信這是一篇值得去收藏的一篇文章。內(nèi)容可能有點(diǎn)多，所以這里做一個(gè)總結(jié)：

• 定位
• 尺寸
• 浮動(dòng)
• 最初的布局——table
• 兩欄布局
• 三欄布局
• 移動(dòng)端的布局

相信你看完這些，在以后，一定可以拿到設(shè)計(jì)稿的時(shí)候，內(nèi)心大致有個(gè)算盤，應(yīng)該如何區(qū)分，如何布局。

最后，如果你對(duì)我寫的有疑問，可以與我討論。如果我寫的有錯(cuò)誤，歡迎指正。你喜歡我的博客，請(qǐng)給我關(guān)注Star~呦。大家一起總結(jié)一起進(jìn)步。歡迎關(guān)注我的github博客