前言

現(xiàn)在，我們被稱為前端工程師。然而闸溃，早年給我們的稱呼卻是頁面仔”蹋或許是職責越來越大，整體的前端井噴式的發(fā)展泽铛，使我們只關注了js，而疏遠了css和html辑鲤。

其實盔腔，我們可能經常在聊組件化，咋地咋地月褥。但是弛随，回過頭來思考一下，如果你看到一張設計稿的時候宁赤，連布局都不清不楚舀透，談何組件化呢。所以决左，我們需要在分清楚組件之前愕够，先來分清楚布局走贪。廢話說了這么多，只是想告訴你惑芭，布局這個東西真的很重要坠狡。本篇內容概括了布局的基礎+基本的PC端布局+移動端適配等內容。如果你喜歡我的文章遂跟，歡迎評論逃沿，歡迎Star~。歡迎關注我的github博客

正文

或許對于你來說幻锁，喜歡js的背后凯亮，是看不懂css的深層。入門級的css非常簡單哄尔，但是触幼，精通它卻沒有想象的容易。我們本篇聊的是布局究飞。前端開發(fā)置谦，從拿到設計稿的那一刻，布局的思考就已經開始了亿傅。

舉個例子媒峡，建筑師在設計房屋的時候，需要丈量開發(fā)地塊的長度葵擎，以及每幢房屋相對于其他房屋的位置谅阿。

在css布局中，似乎也是這樣開始的酬滤。我們也會去區(qū)分每個元素的尺寸和定位签餐，力爭完美的實現(xiàn)整個設計稿。所以盯串，我們的布局應該從定位和尺寸開始聊起

定位

定位的概念就是它允許你定義一個元素相對于其他正常元素的位置氯檐，它應該出現(xiàn)在哪里，這里的其他元素可以是父元素体捏，另一個元素甚至是瀏覽器窗口本身冠摄。還有就是浮動了，其實浮動并不完全算是定位几缭，它的特性非常的神奇河泳，以至于它在布局中被人廣泛的應用。我們會在后文中專門提及它的年栓。

談及定位拆挥，我們就得從position屬性說起。你能準確的說出position的屬性值嗎某抓？相信你可以完美地說出這么六個屬性值：static纸兔、relative惰瓜、absolute、fixed食拜、sticky和inherit鸵熟。

• static(默認)：元素框正常生成。塊級元素生成一個矩形框负甸，作為文檔流的一部分流强；行內元素則會創(chuàng)建一個或多個行框，置于其父元素中呻待。
• relative：元素框相對于之前正常文檔流中的位置發(fā)生偏移打月，并且原先的位置仍然被占據(jù)。發(fā)生偏移的時候蚕捉，可能會覆蓋其他元素奏篙。
• absolute：元素框不再占有文檔流位置，并且相對于包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不為static的元素)
• fixed：元素框不再占有文檔流位置迫淹，并且相對于視窗進行定位
• sticky：(這是css3新增的屬性值)粘性定位秘通，官方的介紹比較簡單，或許你不能理解敛熬。其實肺稀，它就相當于relative和fixed混合。最初會被當作是relative应民，相對于原來的位置進行偏移话原；一旦超過一定閾值之后，會被當成fixed定位诲锹，相對于視口進行定位繁仁。demo地址

簡單地，介紹一下position的屬性值的含義后归园，在來看一下偏移量top黄虱、right、bottom蔓倍、left四個屬性悬钳。

不清楚，當初在初學css的時候偶翅，會不會與margin這個屬性混淆？其實碉渡，它們之間是很容易去辨識地聚谁。因為這四個屬性值，其實是滞诺，定位時的偏移量形导。偏移量不會對static的元素起到作用环疼。而margin，相對應的是盒子模型的外邊距朵耕，它會對每個元素框起到作用炫隶，使得元素框與其他元素之間產生空白。

下面：我們來看一下一些常用定位的偏移

• relative：它的偏移是相對于原先在文檔流中的位置阎曹，如圖：

  relative
  relative-offset

  這里設置了top：100px伪阶，left：100px。

• absolute：它的偏移量是相對于最近一級position不是static的祖先元素的

• fixed：它的偏移量是相對于視口的处嫌。

其實栅贴，這里說描述的內容，應該都是需要理解的熏迹。這些相對于布局來說是基礎的檐薯，同時也是非常重要的。需要注意的是注暗，這里的偏移量其實已經涉及到了接下來要說的尺寸坛缕。在做自適應布局設計時，往往希望這些偏移量的單位能夠使用百分比捆昏，或者相對的單位例如rem等赚楚。

尺寸

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

尺寸，我們就應該從單位聊起膨俐，對于px這個單位勇皇，做網頁的應該在熟悉不過了，因此不多做介紹焚刺。

那么敛摘，我們可以來介紹一下下面幾個單位：

• 百分比：百分比的參照物是父元素，50%相當于父元素width的50%
• rem：這個對于復雜的設計圖相當有用乳愉，它是html的font-size的大小
• em：它雖然也是一個相對的單位兄淫，相對于父元素的font-size，但是蔓姚，并不常用捕虽，主要是計算太麻煩了。

單位只是一個來定義元素大小的相應參考坡脐。另一個概念泄私，或許可以用房子來打一個比方，在早年每幢房子都會在房子的外圍建一層柵欄，使得整一塊地區(qū)可以看成房子+內部地塊+柵欄+外圍地塊的模型晌端。而在css中捅暴，每個元素也會有盒子模型的概念。

盒子模型：每個元素咧纠，都會形成一個矩形塊蓬痒，主要包括四部分：margin(外邊距)+border(邊框)+padding(內邊距)+content(內容)

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

content-box

這是標準盒子模型钧椰，可以看到width的長度等于content的寬度粹断；而當將box-sizing的屬性值設置成border-box時，盒子模型的width=border+padding+content的總和嫡霞。

可以看出瓶埋，對于不同的模型的寬度是不同的。寬度默認的屬性值是auto诊沪，這個屬性值會使得內部元素的長度自動填充滿父元素的width养筒。如圖：

width-auto

但是，height的屬性值也是默認的auto端姚，為什么沒有像width一樣呢晕粪？

其實，auto這個屬性值表示的是瀏覽器自動計算渐裸。這種自動計算巫湘，需要一個基準，一般瀏覽器都是允許高度滾動的昏鹃，所以尚氛，會導致一個問題——瀏覽器找不到垂直方向上的基準。

同樣地道理也會被應用在margin屬性上洞渤。相信如果考察居中時阅嘶，水平居中你可能閉著眼睛都能寫出來，但是垂直居中卻繞著腦袋想载迄。這是因為如果是塊級元素水平居中只要將水平方向上的margin設置成auto就可以了讯柔。但是，垂直方向上卻沒有這么簡單护昧，因為你設置成auto時魂迄，margin為0。這個問題惋耙，還是需要仔細思考一下的极祸。

到此為止慈格，布局最基本的部分我們已經將去大半怠晴，還有就是一塊浮動遥金。

浮動

浮動，這是一個非常有意思的東西蒜田，在布局中被廣泛的應用稿械。最初，設計浮動時冲粤，其實并不是為了布局的美莫，而是為了實現(xiàn)文字環(huán)繞的特效，如圖：

float

但是梯捕，浮動并不是僅僅這樣而已厢呵。何為浮動？浮動應該說是‘自成一派’傀顾，類似于ps中的圖層一樣襟铭，浮動的元素會在浮動層上面進行排布，而在原先文檔流中的元素位置短曾，會被以某種方式進行刪除寒砖，但是還是會影響布局。你可能會覺得有疑問嫉拐，什么叫影響布局哩都？我們可以來舉個例子：

首先，我們準備兩個顏色塊婉徘，如圖：

浮動前

之后我們將left的塊設置成左浮動漠嵌，如圖：

浮動后

可以，發(fā)現(xiàn)雖然left塊因為左浮動盖呼，而使得原先元素在文檔流中占有的位置被刪除儒鹿，但是，當right塊補上原先的位置時塌计，right塊中的字體卻被擠出來了挺身。這就是所謂的影響布局。

浮動為什么會被使用在布局中呢锌仅？因為設置浮動后的元素會形成BFC（使得內部的元素不會被外部所干擾）章钾，并且元素的寬度也不再自適應父元素寬度，而是適應自身內容热芹。這樣就可以贱傀，輕松地實現(xiàn)多欄布局的效果。

浮動的內容還需要介紹一塊——清除浮動伊脓「可以看到魁衙，浮動元素，其實對于布局來說株搔，是特別危險的剖淀。因為你可能這一塊做過浮動，但未做清除纤房，那么造成高度塌陷的問題纵隔。就是上面圖示的那種情況。

清除浮動炮姨，最常用的方法有兩種:

• overflow: 將父元素的overflow捌刮，設置成hidden。
• after偽類：對子元素的after偽類進行設置舒岸。

這里只是稍微的提上一嘴绅作。下面我們正式來介紹一下網頁的布局，本篇最核心的東西蛾派。

最初的布局——table

最初的時候俄认，網頁簡單到可能只有文字和鏈接。這時候碍脏，大家最常用的就是table梭依。因為table可以展示出多個塊的排布。

這種布局現(xiàn)在應該不常用了典尾，因為在形色單一時役拴，使用起來方便。但是钾埂，現(xiàn)在的網頁變得越來越復雜河闰，適配的問題也是越來越多，這種布局已經不再時候了褥紫。

主要是div塊的出現(xiàn)姜性，可以使得網頁進行靈活的排布，使得網頁變得繁榮髓考。這時部念，開發(fā)者也開始思索如何去更加清晰地分辨網頁的層次。接下來氨菇，我們可以看看有哪些比較出名的布局方式儡炼。

兩欄布局

是否記得，那些一邊主體內容查蓉，一邊目錄的網頁乌询，如圖：

兩欄布局

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

兩欄布局：一欄定寬妹田，一欄自適應唬党。這樣子做的好處是定寬的那一欄可以做廣告，自適應的可以作為內容主體鬼佣。

實現(xiàn)的方式：

1. float + margin：

<body>
  <div class="left">定寬</div>
  <div class="right">自適應</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驶拱，可以使用同樣的效果

三欄布局

三欄布局，也是經常會被使用到的一種布局沮趣。

它的特點：兩邊定寬屯烦，然后中間的width是auto的，可以自適應內容房铭，再加上margin邊距，來進行設定温眉。

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

1.使用左右兩欄使用float屬性类溢，中間欄使用margin屬性進行撐開凌蔬，注意的是html的結果

<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

缺點是：1. 當寬度小于左右兩邊寬度之和時，右側欄會被擠下去闯冷；2. html的結構不正確

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

<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結構正常蛇耀。

缺點時：當父元素有內外邊距時辩诞，會導致中間欄的位置出現(xiàn)偏差

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

將middle的寬度設置為100%，然后將其float設置為left纺涤，其中的main塊設置margin屬性译暂，然后左邊欄設置float為left，之后設置margin為-100%撩炊，右欄也設置為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;  //清除浮動
}
.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

缺點是：1. 結構不正確 2. 多了一層標簽

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

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

三欄布局使用較為廣泛伯顶，不過也是比較基礎的布局方式。對于PC端的網頁來說骆膝，使用較多祭衩，但是移動端，本身寬度的限制谭网，很難做到三欄的方式汪厨。因此，移動端盛行的現(xiàn)在愉择，我們應該掌握一些自適應布局技巧和flex等方式劫乱。

移動端的時代

或許织中，手機占用了人們大部分的時間，對于前端工程師來說衷戈，不僅需要會h5和大前端的技術狭吼，還需要去適配不同的手機屏幕。PC端稱王的時代已經過去殖妇，現(xiàn)在要求的網頁都是需要能夠去適配PC和移動端的刁笙。

之前，所聊的兩欄和三欄布局谦趣，一般只能在PC中去使用疲吸，在移動端，由于屏幕尺寸有限前鹅，很難去做到類似的操作摘悴，所以，我們需要來了解新的東西舰绘。

1. 媒體查詢

如果你需要一張網頁能夠在PC和移動端都能按照不同的設計稿顯示出來蹂喻，那么你需要做的就是去設置媒體查詢。

媒體查詢的css標識符是@media捂寿，它的媒體類型可以分為：

1. all口四， 所有媒體
2. braille 盲文觸覺設備
3. embossed 盲文打印機
4. print 手持設備
5. projection 打印預覽
6. screen 彩屏設備
7. speech ‘聽覺’類似的媒體類型
8. tty 不適用像素的設備
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;}
}
/*移動端樣式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

媒體查詢的主要原理：它像是給整個css樣式設置了斷點，通過給定的條件去判斷秦陋，在不同的條件下蔓彩，顯示不同的樣式。例如：手機端的尺寸在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彈性盒子

其實移動端會經常使用到flex布局，因為在簡單的頁面適配方面抡句，flex可以起到很好的拉伸的效果探膊。我們先看幾張圖體會一下：

flex盒子

flex盒子

flex盒子

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

這就是很明顯的腌闯，flex布局。flex可以在移動端適配比較簡單的雕憔，元素比較單一的頁面姿骏。

具體的flex布局內容，在這里不詳細說明斤彼。flex傳送門

rem適配

rem可以說是移動端適配的一個神器分瘦。類似于手淘等界面蘸泻，都是使用的rem進行的適配。這種界面有個特點就是頁面元素的復雜度比較高嘲玫，而使用flex進行布局會導致頁面被拉伸悦施，但是上下的高度卻沒有變化等問題。示例圖：

rem適配

rem適配

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

總結

分析到這里抡诞，布局的很多東西都已經非常的清晰了。相信這是一篇值得去收藏的一篇文章土陪。內容可能有點多昼汗，所以這里做一個總結：

• 定位
• 尺寸
• 浮動
• 最初的布局——table
• 兩欄布局
• 三欄布局
• 移動端的布局

相信你看完這些，在以后旺坠，一定可以拿到設計稿的時候乔遮，內心大致有個算盤，應該如何區(qū)分取刃，如何布局。

最后出刷，如果你對我寫的有疑問璧疗，可以與我討論。如果我寫的有錯誤馁龟，歡迎指正崩侠。你喜歡我的博客，請給我關注Star~呦坷檩。大家一起總結一起進步却音。歡迎關注我的github博客