CSS主要用於對HTML文件功能的補充及擴展，其作用就是對HTML文件中各種排版進行設置，達到對網頁中字體、顏色、背景、圖片等的控制，使網頁能夠完全依照設計者的想法來顯示。
CSS可以控制網頁的顯示，HTML標簽中的屬性也可以控制其顯示，為什么還要有CSS呢？其中一個原因就是：以前幾乎一個人就可以完成一個網站的設置，非常的簡單，現在不是了，一個網站需要很多的人一起工作才可以完成，如果每個人都按照自己的喜好網頁制作，那么開發出來的網頁的風格就會不一樣，那么這些網頁很難放在同一個網站中了，CSS可以方便地設置所有網頁的風格，然后交由不同部門、不同地方的人制作網頁。
CSS就是HTML中標簽屬性獨立出來的東西，當然CSS也有自己特有的東西，將HTML語言中內容顯示的部分獨立的形成一個整體(CSS)，然后，我們編寫網頁的時候，使用HTML語言設置網頁內容的結構，使用CSS語言設置網頁內容的顯示，從而達到使網頁編程的靈活性和復用性增強的目的。
注意，HTML語言仍具有網頁內容顯示的功能，但是，我們在具體做網頁的時候，通常只用它對網頁內容結構控制的功能。
一、盒子模型
HTML中的所有元素，不論其元素是塊級元素，還是行集元素，在CSS看來都是一個盒子，這個就是盒子模型。
這里需要說的是，我們最好把這個“盒子”理解成沒有高度的盒子，這樣有利於我們理解下面層的概念，當然，你也可以把這個“盒子”理解成有高度的盒子，這樣的話，我們需要將下面“層”理解成有一定高度的層。
1、盒子內部結構
一個盒子實際所占的寬度是由“內容+內邊距+邊框+外邊距”組成，CSS中通過設置width和height來控件盒子大小。
2、邊框
當有多條規則作用於一個邊框時，會產生沖突，后面的設置覆蓋前面的設置，這對於任何屬性是一樣的。
3、內邊距
當一個盒子設置背景圖象后，默認情況下背景覆蓋的范圍是“padding+內容“組成的范圍，並以padding左上角為基准點平鋪圖像。
4、外邊距
body是一個特殊點，它的背景色會延伸到margin部分，而其它盒子的背景色只覆蓋“padding+內容”(IE瀏覽器)或“padding+內容+邊框”（FF瀏覽器）。
二、盒子的浮動和定位
CSS盒子模型的每個屬性都包括四個部分：上、右、下、左；這四部分可同時設置，也可分別設置；而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
1、盒子之間的關系
（1）、標准流
就是不使用其它的與排列和定位相關的特殊CSS規則時，各種元素的規則。
（2）、塊級元素
它們總是以一個塊的形式表現出來，並且跟同級兄弟依次豎直排列，左右撐滿。
（3）、行內元素
本身不占有獨立的區域，僅僅是在其它元素的基上指出了一定的范圍。
2、盒子在標准流中的定位
（1）、行內元素之間的距離：為第一個元素的margin-right和第二元素的margin-left之和。
（2）、塊級元素之間的距離：是margin-top或margin-bottom之中的最大者。
3、浮動和定位
一個塊級元素的范圍是由它里面的標准流內容決定的，與里面的浮動內容無關，也即把其中的子元素浮動后，它就不再屬於父塊，不再屬於標准流了（具體可查看馬海祥博客《清除CSS浮動的方法原理及優缺點評定》的相關介紹）。
注意：兩個塊級原素中，第一個塊級元素浮動時，后面的塊級元素的內容會環繞它，但若是第二個塊級元素浮動時，第一個元素是沒有任何變化的，即不會去環繞第二個浮動的塊級元素的！多塊情況類似的。
（1）、相對定位結論
使用相對定位的盒子，會相對於它原來的位置，通過偏移指定的距離，到達新位置。
使用相對定位的盒子仍在標准流中，它對父塊和兄弟盒子沒有任何影響，它的原位置不會被其它塊補填。
（2）、絕對定位的結論
使用絕對定位的盒子會以它的“最近”的一個“已經定位”的“祖先元素”為基准進行偏移，如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基准進行定位。
絕對定位的盒子從標准流中脫離，這意味着它們對其后的兄弟的定位沒有影響，但是其兄弟盒子會填充它原來的位置，就像它不存在一樣。
4、margin的使用
當塊的高度值小於子塊的高度加上margin的值時，此時IE會自動擴大，保持子元素的margin-bottom的空間以及父元素自身的padding-bottom。
而FF不會，它會保證父元素的height高度的完全吻合，而這時子元素將超過父元素范圍。
5、z-index的使用
z-index屬性用於調整定位時重疊塊的上下位置，z-index大的頁面位於其值小的上方，默認值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關系。
6、display的使用
display的屬性改變一個元素是塊級（block）還是行內(inline)元素，抑或不顯示此元素(none)。
三、塊級元素和行集元素
塊級元素在標准文檔流中是單獨的占一行的，而行集元素在標准文檔流中占得是行的一部分，但是當他們完全脫離標准文檔流的時候，他們就不再具有該特性。
塊級元素和行集元素之間是可以相互改變的，通過display屬性，當屬性值為block時，就可以轉換為塊級元素，當屬性屬性值為inline時，就可以轉換為行集(內聯)元素。
四、層的概念
HTML文檔內容的布局和顯示不僅僅在一個平面上，而是可以在多個平面上進行布局和顯示，各個平面（層）之間的布局有的並沒有完全的斷離關系，有的就完全脫離了關系，當然，其顯示效果我們可以通過z-index屬性進行設置，最后，我們從最外的那個層面看到的重疊效果就是最終顯示的效果。
五、文字與圖像
我們都知道，在網頁上利用HTML定位文字和圖像是一件“令人心痛”的事情，我們必須使用表格標簽和隱式GIF圖像，即使這樣也不能保證定位的精確，因為瀏覽器和操作平台的不同會使顯示的結果發生變化（比如文字與圖片無法在同一行對齊顯示，具體的解決方法可查看馬海祥博客《如何利用CSS代碼使圖片和文字在同一行顯示且對齊》的相關介紹）。
1、文字大小(font-size)
1em表示的長度是其父元素中字母m的標准寬度，1ex則表示父元素中字母x的標准高度，當父元素變化時，使用這兩個單位的子元素的大小會同比例變化。
2、行高(line-height)
（1）、表示兩行文字之間基線的距離，也就是每行文字高度，如果加上下划線，下划線就是基線。
（2）、行高的值既可以使用像素等為行高單位，也可以不加任何單位，只寫數字，此時行高表示行高與字體大小的比值，如字體大小12px，Line-height：1.5。
實際大小為line-height:1.5*12px=18px;
3、字母大小寫轉換（text-transform）
text-transform主要用於定義文本的大小寫狀態，不過，此屬性對中文無意義。
具體的語法有：
capitalize: 首字母大寫
uppercase: 大寫
lowercase: 小寫
none: 正常無變化
inherit: 繼承
4、文字裝飾效果（text-decoration）
text-decoration屬性規定添加到文本的修飾，這個屬性允許對文本設置某種效果，如加下划線，如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。
text-decoration的值有underline，overline，line-height，blink等。
5、文字對齊與首段縮進
（1）、段落水平對齊:text-align
（2）、段首縮進text-indent：對中文網頁,設置為”2em”即可。
6、段落的垂直對齊（vertical-align）
在目前瀏覽器中，只能用表格單元格中的對象豎直方向的對齊設置，而對於一般的塊級元素，如div，不起作用。
7、圖像樣式
（1）、background-position：屬性確定背景圖像的位置，如果設置兩個值，它們分別用於確定水平位置和豎直位置。如果只設置一個值，那么缺省的值為center。
而且它與平鋪相關，實際上指定了平鋪的起始點，除了使用top,left,bottom,right,center外，還以可相對數值和絕對數值來作為它的屬性值，如5%,18px等。
數值表示的是距離左邊的距離和距頂邊的距離。
（2）、background-attachment:fixed可以固定背景圖片，當拉動滾動條時，只有文字移動，而圖片不動。
（3）、圖像的水平（橫向對齊方式）：不能直接設置圖片的text-align屬性，而是由其父像素的該屬性實現的，但是對縱向對齊是可以通過圖像的vertical-align屬性設置的，這點正好與文字的對齊方式相反的。
六、鏈接與導航
在利用div+css制作網頁的過程中，還有一類的我們經常會用到的，那就是鏈接與導航。
1、偽類
（1）、偽類的聲明順序
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
馬海祥提醒大家一點：上面的聲明順序不能變，如果變了，將不會效果。
（2）、a:link與a設置的都是相同的，二者通常情況下是沒有區別的，但實際工作中，經常作用a,a:visited｛｝;
2、按鈕超鏈接
對於普通超鏈接和點擊過的鏈接設置相同，並且利用邊框的樣式模擬按鈕效果，而鼠標指針經過時的超鏈接，相應地改變文字顏色、背景色、位置和邊框，從而模擬出“按下去“的特效。
3、高度(width)和寬度(height)屬性
FF瀏覽器不支持a元素的高度(width)和寬度(height)屬性！
4、項目符號
（1）、list-style-type：屬性設置ull或ol標記符號樣式。
（2）、list-style-image：屬性設置項目符號顯示為圖片，但由於瀏覽器間的差異，一般不使用此屬性，而是將list-style-type屬性值設置為none，然后設置li標記的background實現。
5、簡單菜單導航
雖然把鏈接設為塊級元素，但是只有在鼠標經過文字時（IE6），才能觸發鼠標經過效果，而不是鼠標進入矩形區域就可觸發。
IE7修改了此錯誤，解決方法是：在”#navigation li a”中增加一條CSS規則：height:1em;
七、CSS+DIV布局
使用css+div布局網頁，就是指通過在網頁中插入div標簽並定義相應的css規則進行網頁布局。
1、固定寬度版式
（1）、第一種方法
body{text-align:center;}
#containter{position:relative;margin:1 auto;widht:760px;text-align:left;}
（2）第二種方法
body{margin:0px;}
#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}
2、左中右版式
（1）、左右塊用絕對定位，並且固定塊寬度，而中間塊不設置寬度，自動調整寬度，但是必須將它的padding-left和padding-right分別設置為左右塊寬度（具體可查看馬海祥博客《CSS常用代碼使用技巧大全》的相關介紹）。
（2）、塊的背景色問題：由於左右塊背景色沒有延伸到頁面底端，馬海祥博客建議的解決方法是：當有頁腳時，把一整個塊內容塊（左、中、右三塊）放到一個塊中（這里放不放無所謂，主要是好管理），然后將body背景色設置為與右塊相同的顏色，再制做一副圖片，寬度與left相同，顏色與left背景色相同的塊，做#container的背景圖片，再設置向下重復即可。
八、文檔流
文檔流就是文檔里的內容連續的讀入到程序進程中，然后，經過處理，再連續從程序進程中讀出，輸出到顯示器上，當然，在其讀入和讀出時都是有一定的順序的，不是亂來的，這里需要注意，之所以用“流”字，主要是因為數據在讀入和讀出的傳送過程中，和水的流動非常相似，所以，用了這么一個“流”字，改字描述數據的傳送過程非常形象，但是該字卻沒有強調其讀入讀出的順序性。
在這里我們不需要太多的關心文檔的輸入流，應該多了解些文檔的輸出流，因為程序進程輸出各個層的先后順序的不同，就會導致最終我們看到層的重疊效果的不同。
根據文檔流對層的一些控制的不同，我們可以把文檔流分為常規流、絕對定位流和浮動流，現在我們可以把這個流當成層的意思。
常規流：最原始的那一層，最初該層包含所有的元素，其它層的元素都是從這個層里面弄走的，當然，弄走人家的東西，你得給人家一個說法；
絕對定位流：該層弄走原始層元素時，給人家說，我弄走的東西就完全是我的了，以后你這關於它的任何東西都不能存在；
浮動流：該層還算厚道，不像絕對定位流那樣，說弄走人家東西，就連個毛也不給人家留，浮動流在弄走人家東西的時候，會告訴常規層，你們可以給它留個墓地或者把它原來的家留着，要是留墓地（夠它住就行）的話，墓地的位置由我來定，“好處”就是它的真身會在墓地的上方，要是留它原來的家的話，它的真身可以任意的漂流，具體你們留墓地還是流家，會告訴你們的。
九、經驗心得
DIV是HTML中的塊標記，就是把一些HTML標簽作為一個塊，CSS可以通過DIV標簽，使被操作的對象的顆粒度可以靈活的改變，span標簽是行內標簽，div可以通過設置達到span的效果，但是，span很難達到div的一些效果（具體可查看馬海祥博客《如何規范大型網站的HTML代碼》的相關介紹）。
1、在項目列表中，當把<li>標記設置了float：left屬性時，再為<li>指定寬度，那么當<li>標記超過父標記的寬度時就會自動換行。
2、為了減少差異，一般盡量在布局的塊，如<ul>、<li>、<div>、<p>等的屬性margin 、padding的值要么根據需要設置為相應的值，要么設置為0；
3、經常用圖片來代替塊里的標題文字，先把標題文字隱藏，再把代替圖片設置為塊的背景圖片，若是要豎直方向的圖片，一般是這樣設置。
若是橫向的圖片，一般可以把包含標題文字隱藏，再設置相應父元素的寬度和高度及外邊距和內邊距，之后設置父元素的背景圖片為代替圖片。
例：<h3><span>這是測試</span></h3>
H3 span{display:none;}
H3{width:170px;height:60px;margin:0px;padding:0px;}
H3{bacground:url(1.jpg) no-repeat;}
4、假如有兩個塊，第一個設置為浮動后，不論方向，那么第二個塊的內容會環繞第一個塊，但若是設置二個塊浮動后，對第一個塊卻沒任何影響，即第一個塊的內容是不會環繞第二個塊，保持在原來的位置不變。
馬海祥博客點評：
行集元素作為盒子被使用的時候，其本質還是在常規流上，但該元素的上方會形成一個突起，這樣我們從上方看的時候會出現一些覆蓋的現象；塊集元素作為盒子被使用的時候，它作用於整體，不會出現什么突起，什么覆蓋的現象發生；絕對定位流和浮動流，是在重新定位元素位置（float和position屬性設置）的時候出現的。
本文為馬海祥博客原創文章，如想轉載，請注明原文網址摘自於http://www.mahaixiang.cn/css/1160.html，注明出處；否則，禁止轉載；謝謝配合！