今天開始，認(rèn)真學(xué)習(xí)前端技術(shù)，哈哈哈~~~加油~~~
推薦這本《CSS網(wǎng)站布局實錄》（第2版）給初級入門選手，雖然這本書年代有點久遠(yuǎn)，不過很經(jīng)典。
注明一下：這里講述的CSS均為CSS 2.0版本。
第一章 Web標(biāo)準(zhǔn)與CSS布局概述
1.1 Web標(biāo)準(zhǔn)的歷史及發(fā)展
1.1.1 Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)是由W3C(World Wide Web Consortium)和其他標(biāo)準(zhǔn)化組織制定的一套規(guī)范集合，包含一系列標(biāo)準(zhǔn)，包含了HTML、XHTML、JavaScript以及CSS等。
Web標(biāo)準(zhǔn)的目的在于創(chuàng)建一個統(tǒng)一的用于Web表現(xiàn)層的技術(shù)標(biāo)準(zhǔn)，以便通過不同瀏覽器或終端設(shè)備向最終用戶展示信息內(nèi)容。
1.1.2 Web表現(xiàn)層技術(shù)
Web本身是由一套非常復(fù)雜的技術(shù)架構(gòu)組成，但其最終目的是面向瀏覽器或應(yīng)用程序的用戶，并為后者提供一個可視化的、便于操作的信息交互平臺。而表現(xiàn)層技術(shù)指的就是將信息展示給用戶并提供給用戶交互行為的技術(shù)。簡單理解為表現(xiàn)就是樣式，技術(shù)層面上是一堆程序代碼，而表現(xiàn)層帶帶來的是視覺上所看到的東西。
目前，由W3C制定的Web標(biāo)準(zhǔn)正是這樣一個表現(xiàn)層技術(shù)的集合，同時也是目前唯一的跨平臺跨客戶端的技術(shù)。
1.2 Web標(biāo)準(zhǔn)的構(gòu)成
Web標(biāo)準(zhǔn)由三大部分組成的標(biāo)準(zhǔn)集：結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)以及行為(Behavior)。
1.2.1 結(jié)構(gòu)(Structure)
結(jié)構(gòu)用來對網(wǎng)頁中用到的信息進行整理與分類。用于結(jié)構(gòu)化設(shè)計的Web標(biāo)準(zhǔn)技術(shù)主要有這幾種：HTML、XML、XHTML。
1. HTML(Hyper Text Mark-up Language)超文本標(biāo)記語言
這是Web最基本的描述語言。HTML文本是由HTML命令標(biāo)簽組成的描述性文本，HTML標(biāo)簽可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分。頭部描述瀏覽器所需的信息，主體包含所要展現(xiàn)的具體內(nèi)容。
2. XML(The Extensible Markup Language)可擴展標(biāo)記語言
XML最初設(shè)計的目的是為了彌補HTML的不足，以其強大的擴張性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換及描述。
3. XHTML(The Extensible HypterText Markup Language)可擴展超文本標(biāo)記語言
XHTML是更嚴(yán)謹(jǐn)更純凈的HTML版本。簡單來說，建立XHTML的目的就是實現(xiàn)HTML向XML的過渡。
1.2.2 表現(xiàn)(Presentation)
表現(xiàn)技術(shù)用于對已經(jīng)被結(jié)構(gòu)化的信息進行顯示上的控制，包含版式、顏色、大小等樣式控制。目前的Web展示中，用于表現(xiàn)的Web標(biāo)準(zhǔn)技術(shù)主要就是CSS技術(shù)。
CSS(Cascading Style Sheets)層疊樣式表
W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是希望以CSS來描述整個頁面的布局設(shè)計，與HTML所負(fù)責(zé)的結(jié)構(gòu)分開。使用CSS布局與XHTML所描述的信息結(jié)構(gòu)相結(jié)合，能夠幫助設(shè)計師分離出表現(xiàn)與內(nèi)容，使站點的構(gòu)建及維護更加容易。
1.2.3 行為(Behavior)
行為是指對整個文檔內(nèi)部的一個模型進行定義及交互行為的編寫，用于編寫用戶可以進行交互式操作的文檔。表現(xiàn)行為的Web標(biāo)準(zhǔn)技術(shù)主要有：DOM和ECMAScript。
1. DOM(Document Object Model)文檔對象模型
根據(jù)W3C DOM規(guī)范，DOM是一種讓瀏覽器與Web內(nèi)容結(jié)構(gòu)之間溝通接口，使得可以訪問頁面上的標(biāo)準(zhǔn)組件。給予Web設(shè)計師和開發(fā)者一個標(biāo)準(zhǔn)的方法，讓他們來訪問站點中的數(shù)據(jù)、腳本和表現(xiàn)層對象。
2. ECMAScript腳本語言（JavaScript的擴展腳本語言）
它是由CMA(Computer Manufacturers Association)制定的一種標(biāo)準(zhǔn)腳本語言(JavaScript)，用于實現(xiàn)具體界面上對象的交互操作。
1.3 CSS布局與table布局的區(qū)別
從目前的Web標(biāo)準(zhǔn)來看，最理想的技術(shù)結(jié)構(gòu)式使用HTML或XHTML來設(shè)計網(wǎng)頁，推薦使用XHTML以更嚴(yán)謹(jǐn)?shù)恼Z言編寫結(jié)構(gòu)，并使用CSS來完成網(wǎng)頁的布局表現(xiàn)。
1.3.1 CSS的優(yōu)勢
CSS是控制網(wǎng)頁布局樣式的基礎(chǔ)，并真正能夠做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML對樣式的控制而言，CSS能夠?qū)W(wǎng)頁中的對象的位置進行像素級的精確控制，支持幾乎所有的字體、字號樣式，以及擁有對網(wǎng)頁對象盒模型樣式的控制能力，并能夠進行初步頁面交互設(shè)計。歸納起來，CSS有以下幾個主要優(yōu)勢：
瀏覽器支持完善：CSS樣式設(shè)計出來的網(wǎng)頁，在眾多平臺及瀏覽器下對樣式的表現(xiàn)最為接近。
表現(xiàn)與結(jié)構(gòu)分離；在CSS設(shè)計代碼中，通過CSS的內(nèi)部導(dǎo)入(Import)特性，可以使設(shè)計代碼根據(jù)設(shè)計需求進行二次分離。
樣式設(shè)計控制功能強大：對網(wǎng)頁對象的位置排版，能夠進行像素級的精確控制等。
繼承性能優(yōu)越（層疊處理）：CSS的代碼在瀏覽器的解析順序上，具有類似OOP面向?qū)ο蟮幕咎匦裕瑸g覽器能根據(jù)CSS的級別，按照對同一元素定義的先后進行應(yīng)用多個樣式。
1.3.2 傳統(tǒng)的table布局與CSS布局
實際上，傳統(tǒng)table布局方式只是利用了HTML的table元素所具有的零邊框特性。由于table元素可以在顯示時，使得單元格的邊框和間距被設(shè)置為0，即不顯示邊框，所以可以將網(wǎng)頁中的各個元素按照版式劃分后，分別放入表格的各個單元格中，從而實現(xiàn)了復(fù)雜的排版組合效果。
table表格布局代碼最常見的是在HTML標(biāo)簽之間嵌入一些設(shè)計代碼，比如width="100%", border="0"等，而這種混合式編寫的大量樣式設(shè)計代碼混雜在表格單元格中，使得其可讀性大大降低，維護起來成本也很高。
table布局的核心在于設(shè)計一個能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個單元格中，間距及空格則通過許多透明gif進行占位來實現(xiàn)，最終的結(jié)構(gòu)式一個復(fù)雜的表格，而這樣復(fù)雜的表格設(shè)計使得網(wǎng)頁文件量龐大，不利于設(shè)計與修改，最終導(dǎo)致瀏覽器下載及解析速度過慢。
而使用CSS布局則可以從根本上改變這種狀況。CSS布局的思維方法不再放入table元素的設(shè)計中，取而代之的是HTML中的另一個元素div。div可以理解為圖層或者一個塊，div是一種比表格更加簡單的元素。div的功能僅僅用于將一段信息給標(biāo)記出來，用于后期的樣式定義。
在使用div時，無須像表格那樣通過其內(nèi)部的單元格來組織版式。通過CSS強大的樣式定義功能，可以比表格更簡單、更自由地控制頁面的版式及樣式。下面列出一部分div樣式設(shè)計代碼：
XHTML部分：
新聞熱點
疑難解答
