摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。

CSS總結(jié)

由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述了CSS中的基礎部分，以及一些CSS3的新特性。下篇將會繼續(xù)介紹CSS3動畫部分以及移動端部分。

CSS渲染的過程就好像在一張白紙上畫畫一樣，你需要清楚的知道在什么位置畫上那些內(nèi)容(定位過程)，這些內(nèi)容的大小(盒模型)是多少以及該內(nèi)容的顏色(color)，背景(background屬性)，文字(text屬性)等屬性。

盒模型

文檔中的每個元素被描繪為矩形盒子。渲染引擎的目的就是判定大小，屬性——比如它的顏色、背景、邊框方面——及這些盒子的位置。在CSS中，這些矩形盒子用標準盒模型來描述。這個模型描述了一個元素所占用的空間。每一個盒子有四條邊界：外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content。

IE盒模型和W3C盒模型在計算總寬度存在一些差異詳細內(nèi)容請參考該鏈接:

在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE模型中: 總寬度 = margin-left + width + margin-right

在CSS3中引入了box-sizing屬性, 它可以允許改變默認的CSS盒模型對元素寬高的計算方式.

共包括兩個選項：

content-box：標準盒模型，CSS定義的寬高只包含content的寬高

border-box：IE盒模型，CSS定義的寬高包括了content，padding和border

定位機制

css有三種基本定位機制: 標準文檔流(Normal flow), 浮動(Floats)和絕對定位(Absolute positioning)。

標準文檔流

從左到右，從上向下，輸出文檔內(nèi)容

由塊級元素(從左到右撐滿頁面，獨占一行，觸碰到頁面邊緣時自動換行的元素, 如div, ul, li, dl, dt, p)和行級元素組成(能在同一行內(nèi)顯示并且不會改變HTML文檔結(jié)構，如span, input)

浮動

設置為浮動的元素將會往左(float:left)或者往右(float:right)漂移, 直到遇到阻擋 - 其他浮動元素或者父元素的邊框。浮動元素不在標準文檔流中占據(jù)空間,但會對其后的浮動元素造成影響。

絕對定位

設置為絕對定位的元素(posistion:absolute)將從標準文檔流中刪除，其所占據(jù)的標準流空間也不存在。然后通過top,left,right,bottom屬性對其相對父元素進行定位。

網(wǎng)頁布局

流動布局

需了解實現(xiàn)塊居中常見的幾種方式

浮動布局

當設置float:left或者float:right時, 元素會左移或右移直到觸碰到容器位置，仍然處于標準文檔流中。當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度隨內(nèi)容的變化而變化。當元素設置為浮動屬性后，會對緊鄰之后的元素造成影響，緊鄰之后的元素會緊挨著該元素顯示。當父元素包含塊縮成一條時，用clear:both方法無效，它一般用于緊鄰后面的元素的清除浮動，要用overflow屬性。清除浮動的方法有兩種:使用clear屬性 - clear: both; 同時設置width:100%(或固定寬度) + overflow:hidden。

浮動布局可實現(xiàn)橫向多列布局

絕對定位布局

position：static, relative, absolute, fixed

static是默認值

相對定位relative

相對于自身原有位置進行偏移

仍處于標準文檔流中

隨即擁有偏移屬性和z-index屬性

固定定位fixed

一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位,這意味著即便頁面滾動，它還是會停留在相同的位置。一個固定定位元素不會保留它原本在頁面應有的空隙。

絕對定位absolute

相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照基準, 并且它會隨著頁面滾動而移動。

完全脫離了標準文檔流。

隨即擁有偏移屬性和z-index屬性。

實現(xiàn)橫向兩列布局

常用于一列固定寬度，另一列寬度自適應的情況

relative - 父元素相對定位

absolute - 自適應寬度元素定位

能夠?qū)崿F(xiàn)橫向多列布局

常見布局實現(xiàn)

常見的布局有以下幾種: 單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側(cè)定寬中間自適應三列布局。

重點介紹一下常見的三列布局之: 圣杯布局和雙飛翼布局。

圣杯布局和雙飛翼布局

兩者都屬于三列布局，是一種很常見的頁面布局方式，三列一般分別是子列sub、主列main和附加列extra，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內(nèi)容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。

圣杯布局

body {
    min-width: 600px; /* 2*sub + extra */
}
.container {
    padding-left: 210px;
    padding-right: 190px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    position: relative;
    left: -210px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    position: relative;
    right: -190px;
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

雙飛翼布局(淘寶使用的布局方式)

.main-wrapper {
    float: left;
    width: 100%;
}
.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

總結(jié):

倆種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。

兩種布局方式在實現(xiàn)上也有相同之處，都是讓三列浮動，然后通過負外邊距形成三列布局。

兩種布局方式的不同之處在于如何處理中間主列的位置：圣杯布局是利用父容器的左、右內(nèi)邊距定位；雙飛翼布局是把主列嵌套在div后利用主列的左、右外邊距定位。

TODO:

margin為負值時的使用

Flex布局

Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。
Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現(xiàn)。此外在移動端使用flex也比較常見。

使用請參考:

CSS flex完全指南

flex歷險記

響應式布局(Responsive Web Design)

響應式布局是指，網(wǎng)頁可以自動識別設備屏幕寬度，根據(jù)不同的寬度采用不同的CSS的樣式，從而達到兼容各種設備的效果。
響應式布局使用媒體查詢(CSS3 Media Queries), 根據(jù)不同屏幕分辨率采用不同CSS規(guī)則, 使用方式如下:

@media screen and (max-width:1024px) {
  /* 視窗寬度小于1024px時 */
  ....
}

Bootstrap grid系統(tǒng)的實現(xiàn)

Bootstrap是很受歡迎的HTML, CSS和JS框架, 用于開發(fā)響應式布局和移動設備優(yōu)先的Web項目。它提供了一套響應式，移動優(yōu)先的流式柵格系統(tǒng)(grid system)，將屏幕分成12列來實現(xiàn)響應式的。它的實現(xiàn)原理非常簡單，Media Query加上float布局，如果想了解實現(xiàn)細節(jié)，請參考我另外一篇博客Boostrap網(wǎng)格系統(tǒng)。

CSS reset

CSS reset的目的是為了將不同瀏覽器自帶樣式重置，達到保持瀏覽器一致性的目的;reset.css通常是樣式設計開始之前第一個引用的CSS文件。

TODO:

Normalize.css

CSS hacks

不同的瀏覽器對CSS的解析結(jié)果是不同的，因此會導致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器局部的兼容性問題。而這個針對不同的瀏覽器寫不同的CSS 代碼的過程，就叫CSS Hack。
CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器。

TODO:

常用css hacks技巧

CSS sprite

把網(wǎng)頁中的一些零星背景圖片整合到一張圖片當中，再利用CSS背景圖片定位屬性定位到要顯示的位置，因此也叫圖片拼合技術。
好處：減少文件體積和服務器請求次數(shù)，從而提高開發(fā)效率。一般情況下保存為PNG-24，可以設計出豐富多彩的圖標。
難處：你需要預先確定每個圖標的大小。注意小圖標與小圖標之間的距離。
實現(xiàn)方式: background-image + background-position。

TODO:

如何制作CSS sprite圖

iconfont字體

iconfont是指使用字體文件取代圖片文件，來展示圖標和一些特殊字體等元素。它使用CSS3中的@font-face屬性，它允許加載自定義字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。它有很多優(yōu)勢: 首先它的體積要比圖片小得多; 特定的屬性(顏色,大小,透明)等修改起來就像是操作字體一樣簡單;iconfont具有矢量性, 放大縮小不會失真;
使用步驟:

設計師設計出Icon矢量圖,需要保存為多種格式(可以使用一些online webfont工具完成)。

EOT(Embedded OpenType Fonts) IE專用格式

WOFF(The Web Open Font Format) Web字體最佳格式, 它是一個開放的TrueType/OpenType的壓縮版本。09年被開發(fā), 如今是W3C阻止的推薦標準。

TTF(TrueType Fonts) MacOS和WIN操作系統(tǒng)中最常見格式。

SVG(SVG Fonts) 用于SVG字體渲染的一種格式, W3C制定的開放標準圖形格式。

制作完成之后，進行字體聲明。由于各個瀏覽器支持的字體文件不同, 所以要聲明多種字體達到瀏覽器兼容的目的。聲明格式如下:

@font-face {

font-family: ;
src: [ [format( #)]?| ] #;
font-weight: ;
font-style: