定位

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

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

• static(默認)：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分；行內元素則會創建一個或多個行框，置於其父元素中。
• relative：元素框相對於之前正常文檔流中的位置發生偏移，並且原先的位置仍然被占據。發生偏移的時候，可能會覆蓋其他元素。
• absolute：元素框不再占有文檔流位置，並且相對於包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不為static的元素)
• fixed：元素框不再占有文檔流位置，並且相對於視窗進行定位
• sticky：(這是css3新增的屬性值)粘性定位，官方的介紹比較簡單，或許你不能理解。其實，它就相當於relative和fixed混合。最初會被當作是relative，相對於原來的位置進行偏移；一旦超過一定閾值之後，會被當成fixed定位，相對於視口進行定位。
  

簡單地，介紹一下position的屬性值的含義後，在來看一下偏移量top、right、bottom、left四個屬性。

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

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

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

這裏設置了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塊的出現，可以使得網頁進行靈活的排布，使得網頁變得繁榮。這時，開發者也開始思索如何去更加清晰地分辨網頁的層次。接下來，我們可以看看有哪些比較出名的布局方式。

兩欄布局

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

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

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

實現的方式：

1. float + margin：

如圖所示：

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

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