CSS 佈局說——可能是最全的

發表於2017-10-04

前言

現在,我們被稱為前端工程師。然而,早年給我們的稱呼卻是頁面仔。或許是職責越來越大,整體的前端井噴式的發展,使我們只關注了js,而疏遠了css和html。

其實,我們可能經常在聊元件化,咋地咋地。但是,回過頭來思考一下,如果你看到一張設計稿的時候,連佈局都不清不楚,談何元件化呢。所以,我們需要在分清楚元件之前,先來分清楚佈局。廢話說了這麼多,只是想告訴你,佈局這個東西真的很重要。本篇內容概括了佈局的基礎+基本的PC端佈局+移動端適配等內容。如果你喜歡我的文章,歡迎評論,歡迎Star~。歡迎關注我的github部落格

正文

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

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

在css佈局中,似乎也是這樣開始的。我們也會去區分每個元素的尺寸和定位,力爭完美的實現整個設計稿。所以,我們的佈局應該從定位和尺寸開始聊起

定位

定位的概念就是它允許你定義一個元素相對於其他正常元素的位置,它應該出現在哪裡,這裡的其他元素可以是父元素,另一個元素甚至是瀏覽器視窗本身。還有就是浮動了,其實浮動並不完全算是定位,它的特性非常的神奇,以至於它在佈局中被人廣泛的應用。我們會在後文中專門提及它的。

談及定位,我們就得從position屬性說起。你能準確的說出position的屬性值嗎?相信你可以完美地說出這麼六個屬性值:static、relative、absolute、fixed、sticky和inherit。

  • static(預設):元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分;行內元素則會建立一個或多個行框,置於其父元素中。
  • relative:元素框相對於之前正常文件流中的位置發生偏移,並且原先的位置仍然被佔據。發生偏移的時候,可能會覆蓋其他元素。
  • 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,但是,並不常用,主要是計算太麻煩了。

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

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

css中存在兩種不同的盒子模型,可以通過box-sizing設定不同的模型。兩種盒子模型,主要是width的寬度不同。如圖:

687474703a2f2f7777312e73696e61696d672e636e2f6c617267652f37393436323039306a773166316974386c703673736a32306b7130636e6a73342e6a7067

這是標準盒子模型,可以看到width的長度等於content的寬度;而當將box-sizing的屬性值設定成border-box時,盒子模型的width=border+padding+content的總和。

可以看出,對於不同的模型的寬度是不同的。寬度預設的屬性值是auto,這個屬性值會使得內部元素的長度自動填充滿父元素的width。如圖:

width-auto

但是,height的屬性值也是預設的auto,為什麼沒有像width一樣呢?

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

同樣地道理也會被應用在margin屬性上。相信如果考察居中時,水平居中你可能閉著眼睛都能寫出來,但是垂直居中卻繞著腦袋想。這是因為如果是塊級元素水平居中只要將水平方向上的margin設定成auto就可以了。但是,垂直方向上卻沒有這麼簡單,因為你設定成auto時,margin為0。這個問題,還是需要仔細思考一下的。

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

浮動

浮動,這是一個非常有意思的東西,在佈局中被廣泛的應用。最初,設計浮動時,其實並不是為了佈局的,而是為了實現文字環繞的特效,如圖:

float

但是,浮動並不是僅僅這樣而已。何為浮動?浮動應該說是‘自成一派’,類似於ps中的圖層一樣,浮動的元素會在浮動層上面進行排布,而在原先文件流中的元素位置,會被以某種方式進行刪除,但是還是會影響佈局。你可能會覺得有疑問,什麼叫影響佈局?我們可以來舉個例子:

首先,我們準備兩個顏色塊,如圖:

none-float

之後我們將left的塊設定成左浮動,如圖:

has-float

可以,發現雖然left塊因為左浮動,而使得原先元素在文件流中佔有的位置被刪除,但是,當right塊補上原先的位置時,right塊中的字型卻被擠出來了。這就是所謂的影響佈局。

浮動為什麼會被使用在佈局中呢?因為設定浮動後的元素會形成BFC(使得內部的元素不會被外部所干擾),並且元素的寬度也不再自適應父元素寬度,而是適應自身內容。這樣就可以,輕鬆地實現多欄佈局的效果。

浮動的內容還需要介紹一塊——清除浮動。可以看到,浮動元素,其實對於佈局來說,是特別危險的。因為你可能這一塊做過浮動,但未做清除,那麼造成高度塌陷的問題。就是上面圖示的那種情況。

清除浮動,最常用的方法有兩種:

  • overflow: 將父元素的overflow,設定成hidden。
  • after偽類:對子元素的after偽類進行設定。

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

最初的佈局——table

最初的時候,網頁簡單到可能只有文字和連結。這時候,大家最常用的就是table。因為table可以展示出多個塊的排布。

這種佈局現在應該不常用了,因為在形色單一時,使用起來方便。但是,現在的網頁變得越來越複雜,適配的問題也是越來越多,這種佈局已經不再時候了。

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

兩欄佈局

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

two-lan

類似於上圖的佈局,可以定義為兩欄佈局

兩欄佈局:一欄定寬,一欄自適應。這樣子做的好處是定寬的那一欄可以做廣告,自適應的可以作為內容主體。

實現的方式:

  1. float + margin:
定寬
自適應

如圖所示:

two-layout

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

三欄佈局

三欄佈局,也是經常會被使用到的一種佈局。

它的特點:兩邊定寬,然後中間的width是auto的,可以自適應內容,再加上margin邊距,來進行設定。

三欄佈局可以有4種實現方式,每種實現方式都有各自的優缺點。

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

左欄
右欄
中間欄

CSS 佈局說——可能是最全的

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

2. 使用position定位實現,即左右兩欄使用position進行定位,中間欄使用margin進行定位

左欄
中間欄
右欄

30096185-9cb152e8-9309-11e7-9351-6324d96130ba

好處是:html結構正常。

缺點時:當父元素有內外邊距時,會導致中間欄的位置出現偏差

3. 使用float和BFC配合聖盃佈局

將middle的寬度設定為100%,然後將其float設定為left,其中的main塊設定margin屬性,然後左邊欄設定float為left,之後設定margin為-100%,右欄也設定為float:left,之後margin-left為自身大小。

中間
左欄
右欄

bfc-layout

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

4. flex佈局

左欄
中間
右欄

 

third-layout (2)

除了相容性,一般沒有太大的缺陷

三欄佈局使用較為廣泛,不過也是比較基礎的佈局方式。對於PC端的網頁來說,使用較多,但是移動端,本身寬度的限制,很難做到三欄的方式。因此,移動端盛行的現在,我們應該掌握一些自適應佈局技巧和flex等方式。

移動端的時代

或許,手機佔用了人們大部分的時間,對於前端工程師來說,不僅需要會h5和大前端的技術,還需要去適配不同的手機螢幕。PC端稱王的時代已經過去,現在要求的網頁都是需要能夠去適配PC和移動端的。

之前,所聊的兩欄和三欄佈局,一般只能在PC中去使用,在移動端,由於螢幕尺寸有限,很難去做到類似的操作,所以,我們需要來了解新的東西。

1. 媒體查詢

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

媒體查詢的css識別符號是@media,它的媒體型別可以分為:

  1. all, 所有媒體
  2. braille 盲文觸覺裝置
  3. embossed 盲文印表機
  4. print 手持裝置
  5. projection 列印預覽
  6. screen 彩屏裝置
  7. speech ‘聽覺’類似的媒體型別
  8. tty 不適用畫素的裝置
  9. tv 電視

程式碼示例:

媒體查詢的主要原理:它像是給整個css樣式設定了斷點,通過給定的條件去判斷,在不同的條件下,顯示不同的樣式。例如:手機端的尺寸在750px,而PC端則是大於750px的,我們可以將樣式寫成:

demo地址

效果圖:

mobile-mediapc-media

flex彈性盒子

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

459873-20151014135809710-1472399325459873-20151014135813913-563846656459873-20151014135815319-1600880598

可以從圖中看出,這個網頁不管螢幕解析度怎麼發生變化,它的高度和位置都不變,而且裡面的元素排布也沒有發生變化,總是圖示資訊在左邊和薪資狀況在右邊。

這就是很明顯的,flex佈局。flex可以在移動端適配比較簡單的,元素比較單一的頁面。

具體的flex佈局內容,在這裡不詳細說明。flex傳送門

rem適配

rem可以說是移動端適配的一個神器。類似於手淘等介面,都是使用的rem進行的適配。這種介面有個特點就是頁面元素的複雜度比較高,而使用flex進行佈局會導致頁面被拉伸,但是上下的高度卻沒有變化等問題。示例圖:459873-20151014135823710-1656372796

459873-20151014135825866-2517097

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

總結

分析到這裡,佈局的很多東西都已經非常的清晰了。相信這是一篇值得去收藏的一篇文章。內容可能有點多,所以這裡做一個總結:

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

相信你看完這些,在以後,一定可以拿到設計稿的時候,內心大致有個算盤,應該如何區分,如何佈局。

最後,如果你對我寫的有疑問,可以與我討論。如果我寫的有錯誤,歡迎指正。你喜歡我的部落格,請給我關注Star~呦。大家一起總結一起進步。歡迎關注我的github部落格