CSS 佈局說——多是最全的

時間 2019-11-17

標籤 css 佈局欄目 CSS 简体版

原文原文鏈接

前言css

如今，咱們被稱爲前端工程師。然而，早年給咱們的稱呼倒是頁面仔。或許是職責愈來愈大，總體的前端井噴式的發展，使咱們只關注了js，而疏遠了css和html。html

其實，咱們可能常常在聊組件化，咋地咋地。可是，回過頭來思考一下，若是你看到一張設計稿的時候，連佈局都不清不楚，談何組件化呢。因此，咱們須要在分清楚組件以前，先來分清楚佈局。廢話說了這麼多，只是想告訴你，佈局這個東西真的很重要。本篇內容歸納了佈局的基礎+基本的PC端佈局+移動端適配等內容。若是你喜歡個人文章，歡迎評論，歡迎Star~。歡迎關注個人github博客前端

正文css3

或許對於你來講，喜歡js的背後，是看不懂css的深層。入門級的css很是簡單，可是，精通它卻沒有想象的容易。咱們本篇聊的是佈局。前端開發，從拿到設計稿的那一刻，佈局的思考就已經開始了。git

舉個例子，建築師在設計房屋的時候，須要丈量開發地塊的長度，以及每幢房屋相對於其餘房屋的位置。github

在css佈局中，彷佛也是這樣開始的。咱們也會去區分每一個元素的尺寸和定位，力爭完美的實現整個設計稿。因此，咱們的佈局應該從定位和尺寸開始聊起瀏覽器

定位前端工程師

定位的概念就是它容許你定義一個元素相對於其餘正常元素的位置，它應該出如今哪裏，這裏的其餘元素能夠是父元素，另外一個元素甚至是瀏覽器窗口自己。還有就是浮動了，其實浮動並不徹底算是定位，它的特性很是的神奇，以致於它在佈局中被人普遍的應用。咱們會在後文中專門說起它的。app

談及定位，咱們就得從position屬性提及。你能準確的說出position的屬性值嗎？相信你能夠完美地說出這麼六個屬性值：static、relative、absolute、fixed、sticky和inherit。組件化

static(默認)：元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分；行內元素則會建立一個或多個行框，置於其父元素中。
relative：元素框相對於以前正常文檔流中的位置發生偏移，而且原先的位置仍然被佔據。發生偏移的時候，可能會覆蓋其餘元素。
absolute：元素框再也不佔有文檔流位置，而且相對於包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不爲static的元素)
fixed：元素框再也不佔有文檔流位置，而且相對於視窗進行定位
sticky：(這是css3新增的屬性值)粘性定位，官方的介紹比較簡單，或許你不能理解。其實，它就至關於relative和fixed混合。最初會被看成是relative，相對於原來的位置進行偏移；一旦超過必定閾值以後，會被當成fixed定位，相對於視口進行定位。demo地址（https://jsbin.com/moxetad/edit?html,css,output）

簡單地，介紹一下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，可是，並不經常使用，主要是計算太麻煩了。

單位只是一個來定義元素大小的相應參考。另外一個概念，或許能夠用房子來打一個比方，在早年每幢房子都會在房子的外圍建一層柵欄，使得整一塊地區能夠當作房子+內部地塊+柵欄+外圍地塊的模型。而在css中，每一個元素也會有盒子模型的概念。

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

css中存在兩種不一樣的盒子模型，能夠經過box-sizing設置不一樣的模型。兩種盒子模型，主要是width的寬度不一樣。如圖：

這是標準盒子模型，能夠看到width的長度等於content的寬度；而當將box-sizing的屬性值設置成border-box時，盒子模型的width=border+padding+content的總和。

能夠看出，對於不一樣的模型的寬度是不一樣的。寬度默認的屬性值是auto，這個屬性值會使得內部元素的長度自動填充滿父元素的width。如圖：

可是，height的屬性值也是默認的auto，爲何沒有像width同樣呢？

其實，auto這個屬性值表示的是瀏覽器自動計算。這種自動計算，須要一個基準，通常瀏覽器都是容許高度滾動的，因此，會致使一個問題——瀏覽器找不到垂直方向上的基準。

一樣地道理也會被應用在margin屬性上。相信若是考察居中時，水平居中你可能閉着眼睛都能寫出來，可是垂直居中卻繞着腦殼想。這是由於若是是塊級元素水平居中只要將水平方向上的margin設置成auto就能夠了。可是，垂直方向上卻沒有這麼簡單，由於你設置成auto時，margin爲0。這個問題，仍是須要仔細思考一下的。

到此爲止，佈局最基本的部分咱們已經將去大半，還有就是一塊浮動。

浮動

浮動，這是一個很是有意思的東西，在佈局中被普遍的應用。最初，設計浮動時，其實並非爲了佈局的，而是爲了實現文字環繞的特效，如圖：

可是，浮動並非僅僅這樣而已。何爲浮動？浮動應該說是‘自成一派’，相似於ps中的圖層同樣，浮動的元素會在浮動層上面進行排布，而在原先文檔流中的元素位置，會被以某種方式進行刪除，可是仍是會影響佈局。你可能會以爲有疑問，什麼叫影響佈局？咱們能夠來舉個例子：

首先，咱們準備兩個顏色塊，如圖：

以後咱們將left的塊設置成左浮動，如圖：

能夠，發現雖然left塊由於左浮動，而使得原先元素在文檔流中佔有的位置被刪除，可是，當right塊補上原先的位置時，right塊中的字體卻被擠出來了。這就是所謂的影響佈局。

浮動爲何會被使用在佈局中呢？由於設置浮動後的元素會造成BFC（使得內部的元素不會被外部所幹擾），而且元素的寬度也再也不自適應父元素寬度，而是適應自身內容。這樣就能夠，輕鬆地實現多欄佈局的效果。

浮動的內容還須要介紹一塊——清除浮動。能夠看到，浮動元素，其實對於佈局來講，是特別危險的。由於你可能這一塊作過浮動，但未作清除，那麼形成高度塌陷的問題。就是上面圖示的那種狀況。

清除浮動，最經常使用的方法有兩種:

overflow: 將父元素的overflow，設置成hidden。
after僞類：對子元素的after僞類進行設置。

這裏只是稍微的提上一嘴。下面咱們正式來介紹一下網頁的佈局，本篇最核心的東西。

最初的佈局——table

最初的時候，網頁簡單到可能只有文字和連接。這時候，你們最經常使用的就是table。由於table能夠展現出多個塊的排布。

這種佈局如今應該不經常使用了，由於在形色單一時，使用起來方便。可是，如今的網頁變得愈來愈複雜，適配的問題也是愈來愈多，這種佈局已經再也不時候了。

主要是div塊的出現，可使得網頁進行靈活的排布，使得網頁變得繁榮。這時，開發者也開始思索如何去更加清晰地分辨網頁的層次。接下來，咱們能夠看看有哪些比較出名的佈局方式。

兩欄佈局

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

相似於上圖的佈局，能夠定義爲兩欄佈局。

兩欄佈局：一欄定寬，一欄自適應。這樣子作的好處是定寬的那一欄能夠作廣告，自適應的能夠做爲內容主體。

實現的方式：

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種實現方式，每種實現方式都有各自的優缺點。

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;

}

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

2. 使用position定位實現，即左右兩欄使用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;

}

好處是：html結構正常。

缺點時：當父元素有內外邊距時，會致使中間欄的位置出現誤差

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;

}

缺點是：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;

}

除了兼容性，通常沒有太大的缺陷

三欄佈局使用較爲普遍，不過也是比較基礎的佈局方式。對於PC端的網頁來講，使用較多，可是移動端，自己寬度的限制，很難作到三欄的方式。所以，移動端盛行的如今，咱們應該掌握一些自適應佈局技巧和flex等方式。

移動端的時代

或許，手機佔用了人們大部分的時間，對於前端工程師來講，不只須要會h5和大前端的技術，還須要去適配不一樣的手機屏幕。PC端稱王的時代已通過去，如今要求的網頁都是須要可以去適配PC和移動端的。

以前，所聊的兩欄和三欄佈局，通常只能在PC中去使用，在移動端，因爲屏幕尺寸有限，很難去作到相似的操做，因此，咱們須要來了解新的東西。

1. 媒體查詢

若是你須要一張網頁可以在PC和移動端都能按照不一樣的設計稿顯示出來，那麼你須要作的就是去設置媒體查詢。

媒體查詢的css標識符是@media，它的媒體類型能夠分爲：

all，全部媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺’相似的媒體類型
tty 不適用像素的設備
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;

  }

}