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

CSS總結(jié)

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

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

盒模型

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

IE盒模型和W3C盒模型在計(jì)算總寬度存在一些差異詳細(xì)內(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屬性, 它可以允許改變默認(rèn)的CSS盒模型對元素寬高的計(jì)算方式.

共包括兩個(gè)選項(xiàng)：

content-box：標(biāo)準(zhǔn)盒模型，CSS定義的寬高只包含content的寬高

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

定位機(jī)制

css有三種基本定位機(jī)制: 標(biāo)準(zhǔn)文檔流(Normal flow), 浮動(dòng)(Floats)和絕對定位(Absolute positioning)。

標(biāo)準(zhǔn)文檔流

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

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

浮動(dòng)

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

絕對定位

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

網(wǎng)頁布局

流動(dòng)布局

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

浮動(dòng)布局

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

浮動(dòng)布局可實(shí)現(xiàn)橫向多列布局

絕對定位布局

position：static, relative, absolute, fixed

static是默認(rèn)值

相對定位relative

相對于自身原有位置進(jìn)行偏移

仍處于標(biāo)準(zhǔn)文檔流中

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

固定定位fixed

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

絕對定位absolute

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

完全脫離了標(biāo)準(zhǔn)文檔流。

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

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

常用于一列固定寬度，另一列寬度自適應(yīng)的情況

relative - 父元素相對定位

absolute - 自適應(yīng)寬度元素定位

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

常見布局實(shí)現(xiàn)

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

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

圣杯布局和雙飛翼布局

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

圣杯布局

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)先加載。

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

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

TODO:

margin為負(fù)值時(shí)的使用

Flex布局

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

使用請參考:

CSS flex完全指南

flex歷險(xiǎn)記

響應(yīng)式布局(Responsive Web Design)

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

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

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

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

CSS reset

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

TODO:

Normalize.css

CSS hacks

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

TODO:

常用css hacks技巧

CSS sprite

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

TODO:

如何制作CSS sprite圖

iconfont字體

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

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

EOT(Embedded OpenType Fonts) IE專用格式

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

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

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

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

@font-face {

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