今天開始，認(rèn)真學(xué)習(xí)前端技術(shù)，哈哈哈~~~加油~~~

推薦這本《CSS網(wǎng)站布局實(shí)錄》（第2版）給初級(jí)入門選手，雖然這本書年代有點(diǎn)久遠(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)建一個(gè)統(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àn)g覽器或應(yīng)用程序的用戶，并為后者提供一個(gè)可視化的、便于操作的信息交互平臺(tái)。而表現(xiàn)層技術(shù)指的就是將信息展示給用戶并提供給用戶交互行為的技術(shù)。簡(jiǎn)單理解為表現(xiàn)就是樣式，技術(shù)層面上是一堆程序代碼，而表現(xiàn)層帶帶來的是視覺上所看到的東西。

目前，由W3C制定的Web標(biāo)準(zhǔn)正是這樣一個(gè)表現(xiàn)層技術(shù)的集合，同時(shí)也是目前唯一的跨平臺(tái)跨客戶端的技術(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)用來對(duì)網(wǎng)頁(yè)中用到的信息進(jìn)行整理與分類。用于結(jié)構(gòu)化設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)主要有這幾種：HTML、XML、XHTML。

1. HTML(Hyper Text Mark-up Language)超文本標(biāo)記語(yǔ)言

這是Web最基本的描述語(yǔ)言。HTML文本是由HTML命令標(biāo)簽組成的描述性文本，HTML標(biāo)簽可以說明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分。頭部描述瀏覽器所需的信息，主體包含所要展現(xiàn)的具體內(nèi)容。

2. XML(The Extensible Markup Language)可擴(kuò)展標(biāo)記語(yǔ)言

XML最初設(shè)計(jì)的目的是為了彌補(bǔ)HTML的不足，以其強(qiáng)大的擴(kuò)張性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換及描述。

3. XHTML(The Extensible HypterText Markup Language)可擴(kuò)展超文本標(biāo)記語(yǔ)言

XHTML是更嚴(yán)謹(jǐn)更純凈的HTML版本。簡(jiǎn)單來說，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。

1.2.2 表現(xiàn)(Presentation)

表現(xiàn)技術(shù)用于對(duì)已經(jīng)被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包含版式、顏色、大小等樣式控制。目前的Web展示中，用于表現(xiàn)的Web標(biāo)準(zhǔn)技術(shù)主要就是CSS技術(shù)。

CSS(Cascading Style Sheets)層疊樣式表
W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是希望以CSS來描述整個(gè)頁(yè)面的布局設(shè)計(jì)，與HTML所負(fù)責(zé)的結(jié)構(gòu)分開。使用CSS布局與XHTML所描述的信息結(jié)構(gòu)相結(jié)合，能夠幫助設(shè)計(jì)師分離出表現(xiàn)與內(nèi)容，使站點(diǎn)的構(gòu)建及維護(hù)更加容易。

1.2.3 行為(Behavior)

行為是指對(duì)整個(gè)文檔內(nèi)部的一個(gè)模型進(jìn)行定義及交互行為的編寫，用于編寫用戶可以進(jìn)行交互式操作的文檔。表現(xiàn)行為的Web標(biāo)準(zhǔn)技術(shù)主要有：DOM和ECMAScript。

1. DOM(Document Object Model)文檔對(duì)象模型

根據(jù)W3C DOM規(guī)范，DOM是一種讓瀏覽器與Web內(nèi)容結(jié)構(gòu)之間溝通接口，使得可以訪問頁(yè)面上的標(biāo)準(zhǔn)組件。給予Web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來訪問站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。

2. ECMAScript腳本語(yǔ)言（JavaScript的擴(kuò)展腳本語(yǔ)言）

它是由CMA(Computer Manufacturers Association)制定的一種標(biāo)準(zhǔn)腳本語(yǔ)言(JavaScript)，用于實(shí)現(xiàn)具體界面上對(duì)象的交互操作。

1.3 CSS布局與table布局的區(qū)別

從目前的Web標(biāo)準(zhǔn)來看，最理想的技術(shù)結(jié)構(gòu)式使用HTML或XHTML來設(shè)計(jì)網(wǎng)頁(yè)，推薦使用XHTML以更嚴(yán)謹(jǐn)?shù)恼Z(yǔ)言編寫結(jié)構(gòu)，并使用CSS來完成網(wǎng)頁(yè)的布局表現(xiàn)。

1.3.1 CSS的優(yōu)勢(shì)

CSS是控制網(wǎng)頁(yè)布局樣式的基礎(chǔ)，并真正能夠做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML對(duì)樣式的控制而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體、字號(hào)樣式，以及擁有對(duì)網(wǎng)頁(yè)對(duì)象盒模型樣式的控制能力，并能夠進(jìn)行初步頁(yè)面交互設(shè)計(jì)。歸納起來，CSS有以下幾個(gè)主要優(yōu)勢(shì)：

瀏覽器支持完善：CSS樣式設(shè)計(jì)出來的網(wǎng)頁(yè)，在眾多平臺(tái)及瀏覽器下對(duì)樣式的表現(xiàn)最為接近。
表現(xiàn)與結(jié)構(gòu)分離；在CSS設(shè)計(jì)代碼中，通過CSS的內(nèi)部導(dǎo)入(Import)特性，可以使設(shè)計(jì)代碼根據(jù)設(shè)計(jì)需求進(jìn)行二次分離。
樣式設(shè)計(jì)控制功能強(qiáng)大：對(duì)網(wǎng)頁(yè)對(duì)象的位置排版，能夠進(jìn)行像素級(jí)的精確控制等。
繼承性能優(yōu)越（層疊處理）：CSS的代碼在瀏覽器的解析順序上，具有類似OOP面向?qū)ο蟮幕咎匦?，瀏覽器能根據(jù)CSS的級(jí)別，按照對(duì)同一元素定義的先后進(jìn)行應(yīng)用多個(gè)樣式。
1.3.2 傳統(tǒng)的table布局與CSS布局

實(shí)際上，傳統(tǒng)table布局方式只是利用了HTML的table元素所具有的零邊框特性。由于table元素可以在顯示時(shí)，使得單元格的邊框和間距被設(shè)置為0，即不顯示邊框，所以可以將網(wǎng)頁(yè)中的各個(gè)元素按照版式劃分后，分別放入表格的各個(gè)單元格中，從而實(shí)現(xiàn)了復(fù)雜的排版組合效果。

table表格布局代碼最常見的是在HTML標(biāo)簽之間嵌入一些設(shè)計(jì)代碼，比如width="100%", border="0"等，而這種混合式編寫的大量樣式設(shè)計(jì)代碼混雜在表格單元格中，使得其可讀性大大降低，維護(hù)起來成本也很高。

table布局的核心在于設(shè)計(jì)一個(gè)能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個(gè)單元格中，間距及空格則通過許多透明gif進(jìn)行占位來實(shí)現(xiàn)，最終的結(jié)構(gòu)式一個(gè)復(fù)雜的表格，而這樣復(fù)雜的表格設(shè)計(jì)使得網(wǎng)頁(yè)文件量龐大，不利于設(shè)計(jì)與修改，最終導(dǎo)致瀏覽器下載及解析速度過慢。

而使用CSS布局則可以從根本上改變這種狀況。CSS布局的思維方法不再放入table元素的設(shè)計(jì)中，取而代之的是HTML中的另一個(gè)元素div。div可以理解為圖層或者一個(gè)塊，div是一種比表格更加簡(jiǎn)單的元素。div的功能僅僅用于將一段信息給標(biāo)記出來，用于后期的樣式定義。

在使用div時(shí)，無須像表格那樣通過其內(nèi)部的單元格來組織版式。通過CSS強(qiáng)大的樣式定義功能，可以比表格更簡(jiǎn)單、更自由地控制頁(yè)面的版式及樣式。下面列出一部分div樣式設(shè)計(jì)代碼：

XHTML部分：

CSS部分：

.content{}區(qū)域表示在CSS中定義了一個(gè)名為content的樣式名稱，它用于對(duì)頁(yè)面中所有class為content的對(duì)象進(jìn)行樣式控制。

1.4 向Web標(biāo)準(zhǔn)過渡

Web標(biāo)準(zhǔn)的目的是實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)、表現(xiàn)、行為的分離，達(dá)到最佳架構(gòu)，提供網(wǎng)站可用性與用戶體驗(yàn)。用下面幾個(gè)標(biāo)準(zhǔn)及方法進(jìn)行網(wǎng)站構(gòu)建是最為理想的選擇。

1.4.1 從HTML轉(zhuǎn)向XHTML

為什么要使用XHTML

事實(shí)上，XHTML就是HTML的下一個(gè)版本，用于替代HTML并幫助轉(zhuǎn)向XML的一套過渡型標(biāo)記語(yǔ)言。XHTML的設(shè)計(jì)目的并不是為了最終表現(xiàn)，它主要用于對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行結(jié)構(gòu)設(shè)計(jì)，其嚴(yán)謹(jǐn)語(yǔ)法結(jié)構(gòu)有利于瀏覽器進(jìn)行解析出來，它是一門面向文檔結(jié)構(gòu)的設(shè)計(jì)語(yǔ)言。

目前，XHTML的使用標(biāo)準(zhǔn)主要包含Transitional、Strict和Frameset三種應(yīng)用方式。

Transitional方式：一種松散過渡型的XHTML應(yīng)用，它允許用戶使用部分HTML標(biāo)簽來編寫XHTML文檔。推薦使用這種方法。
Strict方式：一種嚴(yán)格型的應(yīng)用方式，XHTML中不能使用任何樣式表現(xiàn)的標(biāo)簽及屬性。
Frameset方式：針對(duì)框架網(wǎng)頁(yè)的應(yīng)用方式。

1.4.2 發(fā)揮CSS的作用

1. 合理的CSS文件結(jié)構(gòu)

雖然CSS做到了樣式設(shè)計(jì)與內(nèi)容的分離，但CSS文件本身也應(yīng)該擁有良好的層次結(jié)構(gòu)及規(guī)范，目的是進(jìn)一步改善樣式設(shè)計(jì)的可維護(hù)性。

2. 繼承與重用的優(yōu)勢(shì)

使用CSS的優(yōu)勢(shì)就在于其良好的重用特性，一段CSS設(shè)計(jì)代碼可以供多個(gè)區(qū)域同時(shí)使用。除了重用功能外，CSS還可以實(shí)現(xiàn)類似于面向?qū)ο蟪绦蛟O(shè)計(jì)中的繼承機(jī)制，通過繼承機(jī)制能夠進(jìn)一步地完善網(wǎng)站的樣式結(jié)構(gòu)。

3. 設(shè)計(jì)跨平臺(tái)的代碼

CSS也有美中不足，由于不同品牌瀏覽器及不同版本之間的渲染方式不同，各自對(duì)CSS的解析也存在著一定差異。針對(duì)這些原因，CSS設(shè)計(jì)也應(yīng)當(dāng)具有一定的跨平臺(tái)兼容特性，編碼時(shí)應(yīng)盡量減少生僻屬性的使用，如果想兼容舊版本的瀏覽器，也應(yīng)當(dāng)注意留有一定的CSS hack代碼。

CSS hack可以簡(jiǎn)單地翻譯為CSS黑客程序。這種類似于期盼瀏覽器的編碼收到，可以有效的修補(bǔ)瀏覽器的解析問題。

4. 具有良好可用性的CSS樣式設(shè)計(jì)

可用性的目標(biāo)是使得交互產(chǎn)品（軟件、網(wǎng)站）對(duì)用戶的需求提供最大限度的滿足。具有良好可用性的CSS樣式設(shè)計(jì)的目的就是希望通過良好的設(shè)計(jì)，創(chuàng)造出更好的交互式網(wǎng)站，以便用戶使用。

5. 使用基于DOM的腳本語(yǔ)言來編寫交互

DOM的產(chǎn)生同樣是為了實(shí)現(xiàn)腳本語(yǔ)言的跨平臺(tái)與跨瀏覽器應(yīng)用。就目前來說，大部分瀏覽器都支持標(biāo)準(zhǔn)的DOM。使用符合DOM的腳本語(yǔ)言，基本上不再需要檢測(cè)瀏覽器的不同版本而去編寫幾套不同的代碼，只要符合DOM的瀏覽器，相同的代碼就能夠完成所有可支持的操作。目前的JavaScrit是符合DOM標(biāo)準(zhǔn)的腳本語(yǔ)言。

1.5 常見問題

1.5.1 使用Web標(biāo)準(zhǔn)后表格還有用嗎

1. 關(guān)于表格

使用Web標(biāo)準(zhǔn)后，并不是說排除表格的使用，只是使用表格作為網(wǎng)頁(yè)排版，布局頁(yè)面元素是不合理的，表格式用來顯示數(shù)據(jù)的。表格職能不在于進(jìn)行網(wǎng)頁(yè)布局，布局任務(wù)應(yīng)該交給CSS來處理。

2. 關(guān)于其他元素

按照使用經(jīng)驗(yàn)，把XHTML標(biāo)準(zhǔn)中的一些元素分為三大類。

輔助布局設(shè)計(jì)元素
指的是div、span等元素，他們的主要功能是用來布局整個(gè)頁(yè)面。

結(jié)構(gòu)化元素或者信息元素
指的是table、ul、pre、code等元素，他們是一些信息顯示與控制方面的元素。

a、meta元件
使用它們可用來實(shí)現(xiàn)一些特殊功能。

1.5.2 可以繼續(xù)使用HTML來設(shè)計(jì)網(wǎng)頁(yè)嗎

答案是肯定的。只所以推薦使用XHTML是因?yàn)镠TML的設(shè)計(jì)形式已經(jīng)不能滿足表現(xiàn)與內(nèi)容分離的網(wǎng)站架構(gòu)原則。如果繼續(xù)使用HTML來構(gòu)建網(wǎng)站，從最終目標(biāo)上說是沒有差別的。

1.5.3 為什么不直接使用到XML

XML是未來數(shù)據(jù)的描述格式，就目前而言，不適合直接應(yīng)用XML來構(gòu)建網(wǎng)站，因?yàn)樵诩夹g(shù)上難度較高。

1.5.4 什么叫網(wǎng)站重構(gòu)

網(wǎng)站重構(gòu)可以理解為改變老式的HTML表格布局方式，使用新的符合Web標(biāo)準(zhǔn)的網(wǎng)站結(jié)構(gòu)及代碼編寫方法。更深一層的意義時(shí)，希望通過Web標(biāo)準(zhǔn)來提供一個(gè)加大網(wǎng)站效益的接口，這個(gè)效益可以簡(jiǎn)單理解為兩個(gè)方面：可擴(kuò)充性及可維護(hù)性。