從這里開始，不再只是改變一些簡單的字體大小、顏色和修飾之類的元素屬性，而是真正涉及到一些元素顯示的基本原理。這是提高水平的開始。
一、盒模式（the box model）
1、CSS就是這樣看待元素的，它把每個單一的元素看作是一個盒子。每個盒子由內容區及可選的補白、邊框和邊界組成。
最里面是內容區（width屬性用來定義元素的內容區的寬度），被可選的補白包圍着，又圍了一層可選的邊框，最外一層是可選的邊界。
用CSS可以控制盒子的各個方面：內容周圍補白的大小、元素有沒有邊框（以及類型和大小），以及元素之間有多少邊界。用CSS可以控制整個內容區周圍甚至任何一側（上、下、左、右）的補白寬度，也可以控制整個邊界或某一側邊界（上、下、左、右）的寬度。
補白和邊界的區別：邊界是元素之間的空間，而補白是內容周圍多出來的空間。如果有可見的邊框，補白在邊框里面而邊界在邊框外面。把補白想成是元素的一部分，而邊界包圍着元素並把它和周圍的內容隔離開。
補白和邊界都用來提供更多可見的空間，不能直接給補白或邊界添加顏色或別的修飾，但因為它們是透明的，就會呈現背景顏色或背景圖像。在這一點上補白和邊界之間的不同是元素的背景顏色或背景圖像會延伸到補白底下，但不會到邊界。
如果在內容區本身周圍需要更多可見的空間，就用補白；相反，如果想在元素之間或元素和頁邊之間有空間，就用邊界。
2、CSS有一個padding屬性，可以用它在內容周圍設置相同大小的補白。可以把這個屬性設置成多少像素或邊框里面部分的百分之幾。如 padding:25px; 我們在內容的四周（上、下、左、右）各添加了25像素的補白；要在左側添加補白，就要用padding-left屬性。
用CSS添加邊界和補白一樣，可以用百分數或像素定義邊界。 如 margin:30px; 在內容四周（上、下、左、右）各添加 30像素的邊界。屬性margin-right來增加右側的邊界。
注意，width屬性只用來定義內容區的寬度，要指明整個盒子的寬度，需要添加內容區的寬度，左右邊界寬度，左右側補白及邊框寬度。即不能定義整個元素的寬度，你只能定義內容區、補白、邊框和邊界的寬度，把這些全加起來就是整個元素的寬度。
3、可以設置內聯元素如<span>、<em>、<strong>的寬度，但是只有排版時才能看到效果。也可以給這些元素添加邊界和補白、邊框。內聯元素的邊界和補白跟塊元素的稍有不同——如果在內聯元素的四周都添加了邊界，只能看到左邊和右邊的空間。可以在內聯元素的上側和下側添加補白，不過這些補白不影響周圍的其他內聯元素的空間，所以補白會跟其他內聯元素重疊。圖像跟其他的內聯元素稍有不同。width、padding和margin屬性更接近於塊元素。
二、CSS
1、可以用background-image屬性給任何元素添加背景圖像。如果同時設的也有背景顏色，那么它是置於背景顏色之上的。背景圖像跟背景顏色一樣，只出現在內容區和補白之下，沒有延伸到邊框之外的邊界。
background-image:url(images/background.gif); background-image屬性被設置成URL，可以是相對路徑或完整的URL（http://...）.注意URL沒有加引號
還有兩個屬性也能影響背景圖像：background-position和background-repeat.
默認的背景圖像是重復的。還好background-repeat屬性有no -repeat值。瀏覽器默認的背景圖像的位置是元素的左上方（和屬性值設為top left效果一樣）。
background-position屬性用來設置圖像的位置，可以用像素、百分數或top，left，right，bottom，center這些關鍵字定義。
background-repeat屬性用來控制這種平鋪效果，默認的格式是repeat，意為把圖像設置為在水平和垂直方向上都重復。屬性值no-repeat表示圖像只顯示一次，不重復；repeat-x表示圖像只在水平方向上重復；
repeat-y表示圖像只在垂直方向上重復；inherit表示繼承父元素的值。
2、邊框樣式（border-style）一共有8種，有實線、虛線、凸出線、凹進線等；邊框寬度（border-width）屬性用來控制邊框寬度。可以用關鍵詞（thin、medium、thick，但是瀏覽器對它們的默認大小不一定總是相同）或像素來定義寬度；邊框顏色；也可只定義邊框的一側，如上邊框：border-top-color/border-top-style/border-top-width。
怎么讓邊框看起來像鋸齒呢？其實有個小竅門：用虛線邊框（dashed），把它設置為白色（跟頁面的背景顏色匹配，假設頁面背景是白色）。
3、class和id
一般當你想應用一種樣式到多個元素的時候就用類。相反，如果你需要應用樣式的只是一個元素並且頁面上只有一個，就用id。嚴格來說，id屬性是命名唯一的元素的。
（1）p.specials{ color:red; } 這條規則只選擇specials類中的段落。 .specials{ color:red; } 這條規則選擇specials類中的所有元素。
（2）#footer{ color:red; } 這條規則選擇id為“footer”的任意元素。 p#footer{ color:red; } 這條規則選擇一個id為“footer”的<p>元素。
類和id之間的唯一不同是id選擇符只跟一個頁面中的一個元素匹配。
4、使用多樣式表
在XHTML中你可以定義多個樣式表（用多個link標簽）。樣式表鏈接文件的順序很重要！一個樣式表會覆蓋在它之前鏈接的樣式表中的樣式。這些樣式表從上到下排列，最下面的樣式表優先權最高。
<link>元素有一個叫做media的屬性，可以用來定義你的樣式文件所需要的設備類型。例如屬性值為screen適用於電腦屏幕，print適用於打印機類的媒體，handled適用於移動設備和移動電話等。如果沒有提供媒體種類，樣式文件就應該適用於所有設備。並不是所有的瀏覽器都支持media屬性。
5、塊元素的默認寬度是“auto”，就是說會延伸到所有的空間。記住“auto”使內容充滿所有的空間（除了補白、邊框和邊界）。一般元素的高度用默認值，就是auto，瀏覽器垂直擴展內容區，以使所有的內容都能看到。即設置了寬度后，高度就是自動的顯示所有內容。也可以明確地設置高度，但是如果設置的高度太小，內容尾部都有可能丟失，因此一般不用定義元素高度，而默認為auto。
6、text-align:center 在塊元素中用text-align來設置其中的文本對齊樣式，這里設置為居中。其實text-align屬性會影響到一個元素中所有內聯內容的對齊樣式，不僅僅是文本。還要記住，text-aligh屬性只能用於塊元素，如果直接用於內聯元素（如<img>）就沒有作用了。text-aligh屬性值也可繼承。例如<div>元素中的所有文本都在其他塊元素中，如<h2>、<p>.但現在他們的對齊樣式都改變了。這是因為這些塊元素繼承了<div>的text-align屬性。區別是，不是<div>直接影響標題和段落（這些都是塊元素）中的文本對齊樣式，而是標題和段落繼承了text-align屬性值"center"，使它們自己的內容居中了。但是謹記並非所有的屬性都是可以默認繼承的，所以這並不會對所有的屬性都起作用。
7、line-height比較特殊，可以只用一個數字代替相對值（比如em或%）來設置line-height的值。
#elixirs{line-height:1em;} 表明此<div>中的所有元素的行間距都是飲料元素的字體大小的1倍。
#elixirs{line-height:1;} 表明每個飲料<div>中的元素的行間距為它們自己的font-size的1倍，而不是飲料<div>的font-size的1倍。
三、子孫選擇符：用於只想選擇特定元素的子孫元素
1、div h2{color:black;} 父元素+空格+它的子孫，規則的其余部分跟平常寫的一樣。這條規則表明選擇<div>的子孫<h2>.
現在這條規則唯一的問題是如果有人在這個html文件中創建了另外一個<div>，他們的<h2>文本也會是黑色的，即使他們不希望這樣。不過假如<div>有一個id，可以用它來更具體地指出我們想選擇哪個子孫，如2.
2、#divid h2{color:black;} 現在父元素是id為“divid”的元素，<h2>是它的子孫。這條規則表明選擇id為“divid”的元素的子孫<h2>。 這樣更具體一些，因此如果我們給頁面添加另外一個有<h2>的<div>也不會再出問題，因為這條規則只選擇指定id的<div>中的<h2>。
3、子孫選擇符可以選擇任何嵌套在一個元素中的子孫，無論它嵌套得有多深。
4、有沒有只選擇直接孩子的方法？有的。例如:"#elixirs>h2"選擇的<h2>是id為“elixirs”的元素的直接孩子。（子對象選擇符）
四、CSS縮寫
許多CSS屬性要一起使用，其實有不少可以縮寫，可以減少寫CSS的時間。以下舉例：
1、padding-left,padding-right,padding-bottom和padding-top可以不必分別設值，而可以合並成一句：padding:0px 20px 30px 10px; 分別對應了上、右、下、左的補白。注意順序！
2、跟補白一樣，也可以用縮寫指定所有的邊界值。eg: margin:0px,20px,30px,10px; 上、右、下、左（注意順序）
3、如果各側面的補白和邊界值都相等，縮寫就會更簡單：padding：20px; 表明盒子四周的補白都是20像素；
如果上下邊界相同、左右邊界相同，可以這么縮寫： margin:0px 20px; 第一個值表示上和下，第二個值表示右和左。
4、邊框屬性也可縮寫，把邊框屬性都寫成一個屬性，順序不限。 border：thin solid #007e7e;
5、背景也可縮寫，且順序不限。 background:white url(images/cocktail.gif) repeat-x; 還有另外一些值也可以在縮寫形式中指定，比如background-position.
五、<div>和<span>
這兩個是到處都要用到的鋼鐵橫梁，你將用它們構建一些嚴格的支持結構，一旦把這些結構放到合適的位置，就能用全新而強大的方式樣式化它們了。<div>是把塊級的內容分成不同的邏輯部分；<span>元素跟<div>工作方式一樣，用來把內聯內容分成不同的邏輯部分。
1、什么時候該用<span>而不用別的內聯元素（如<em>或<strong>）呢？
通常，要用跟內容的意思最匹配的元素來標記內容。所以，如果想強調某些單詞，就用<em>；如果想重點強調，就用<strong>。但是，如果你真正的目的只是改變某些文字的樣式，就應該用<span>並且把<span>元素放進適當的類中組成一組，一起設計樣式。
六、<a>元素
1、<a>元素跟別的元素不一樣，它的樣式隨它的狀態而改變。
（1）沒點擊過的鏈接，叫做“未被訪問過的鏈接（unvisited link）”，或者簡單叫做“鏈接（link）”，默認值是藍色的。
（2）點擊過的鏈接，叫做“已訪問的鏈接（visited link）”。通常用不同的顏色顯示，便於你區分。大多數瀏覽器中，默認是紫色的。
（3）如果鼠標停在鏈接上而不被點擊，就叫做“鼠標停留在鏈接上（hovering）”。在一些瀏覽器中，你會看到一個顯示“title”屬性文本的工具條。
還有其他的鏈接狀態：focus（聚焦）和active（激活）。focus狀態是指瀏覽器聚焦於連接上的狀態。在有些瀏覽器中可以按Tab鍵跳過頁面上所有的鏈接。當瀏覽器停在一個鏈接上時，這個鏈接就有了“focus”。active狀態發生在當用戶第一次點擊一個鏈接時。注意：有些瀏覽器並不能很好地支持它們。
2、偽類(pseudo-classes)：作用和類一樣，但不是真的類。即可以樣式化pseudo-class，但沒有人會把它們打進XHTML中。那它們是怎么工作的？這得感謝瀏覽器。瀏覽器仔細檢查所有的<a>元素，並把它們添加到正確的偽類中。如一個鏈接是被訪問過的，就把它加進“visited”類中。用戶鼠標停留的鏈接瀏覽器會把它扔進“hover”類中。沒有用戶鼠標停留的鏈接瀏覽器就把它從“hover”類中拽出來。也就是說所有的類都在那兒，瀏覽器從后台添加或刪除元素。
用偽類可以樣式化一些由瀏覽器決定屬於哪個“類”的元素。
樣式化鏈接的方法：
a:link{
color:green; /*這個選擇符選擇未被訪問的鏈接*/
}
a:visited{
color:red; /*這個選擇符選擇已被訪問的鏈接*/
}
a:hover{
background:#f88396; /*這個是相當有趣的規則。當用戶把鼠標停留在連接上，背景顏色就會變成紅絲，這時，鏈接看起來更突出了。這句只是個嘗試，不是必須的。*/
color:yellow; /*這個選擇符選擇鼠標停留在上面的鏈接*/
}
問題：那偽類是不是只用於鏈接呢？
不是的，也用於別的元素。有些瀏覽器也能支持像激活和停留在其他種類的元素這樣的偽類，而且還有其他一些偽類。例如，偽類:first-child是賦值於元素的第一個孩子，像一個<blockquote>中的第一段。不過除了:link、:visited和:hover，使用其他偽類時都要注意，因為瀏覽器不一定都支持它們。
七、層疊（cascade）
Cascading Styling Sheet（層疊式樣式表）
首先，是你（作者）為網頁寫的所有樣式表。
第二，有些瀏覽器也允許用戶給XHTML元素創建他們自己的樣式。如果你的樣式表沒有定義這些樣式，就由用戶的樣式表來代替。（注意讀者在屬性聲明后加上“!important”就能覆蓋你的樣式）
第三，如果沒給一個元素定義樣式，瀏覽器自己有一系列默認樣式可以用。如果沒有作者或讀者提供的樣式表，就用這些樣式。
當瀏覽器需要決定給一個元素應用哪種樣式時，它就采用這些樣式表。優先權最高的是作者的樣式，然后是讀者的樣式，最后是瀏覽器的默認樣式。層疊就是瀏覽器決定采用哪種樣式的方法。
1、層疊中瀏覽器的工作過程
假設網頁中有一個<h1>元素，你要扮成“瀏覽器”，要確定它的font-size屬性，有以下幾步：
第一步：把所有的樣式表集中起來（包括網頁作者寫的樣式表，讀者加進去的樣式表，瀏覽器默認的樣式表）。
第二步：找到所有匹配的聲明。這個例子中要找的是font-size屬性，所以看看所有的有選擇<h1>元素的選擇符的font-size聲明。檢查所有樣式表，找出所有匹配<h1>並且有font-size屬性的規則。
第三步：將所有匹配結果分類。所有匹配的規則都找出來后，把它們以作者、讀者、瀏覽器的順序排序。作者寫的比讀者寫的重要，同樣，讀者的樣式比瀏覽器的默認樣式重要。（前邊提過，讀者可以在CSS屬性中加“!important”，這樣排序的時候要把它們放到最前面）
第四步：根據聲明的具體程度排序。一條規則越能准確地選擇一個元素，它就越具體。（一般憑直覺即可知，對於復雜情況下邊有方法介紹如何處理）注意，只在作者、讀者、瀏覽器各個范圍內排序，不是重新排整個列表。
第五步：最后，將所有沖突規則按照它們在各種樣式表中出現的順序排序。列表中的沖突規則排序的依據是，在它們各自樣式表中后出現的規則更重要一些。
通過以上步驟，順序表中的第一條規則就是獲勝者，就用它的font-size屬性。
2、如何決定一個選擇符的具體度
要計算具體度，先以一組三個數字開始，000.然后計算選擇符中的各種東西——左起第一位：如果這個選擇符有id，每個加1分；中間位：這個選擇符有類或偽類，每個加一分；最后一位：如果這個選擇符有元素名稱，每個加一分。eg：h1.greentea 011;a:link 011;#elixirs h1 101;p img 002.
（1）一個具體度比另一個大事怎么看出來的？把它們當作真正的數字來讀就行：100（一百）比010（十）大，010（十）比001（一）大，一次類推。
（2）像"h1,h2"這樣的規則，應怎么計算具體度？把它想成是兩條單獨的規則：一條h1規則，具體度是001；一條h2規則，具體度也是001.
（3）一條規則在CSS文件中越靠后，優先權越高。但是XHTML中的多個樣式表鏈接的優先權呢？不管在不在同一個CSS文件中，順序總是從頭到尾。就當是把CSS以被鏈接的順序都一起插入到文件中。
（4）注意，上述5個步驟中，每次排序都是以之前的順序為基礎的。首先，以作者、讀者、瀏覽器的順序排序，接着，在這些分類中按具體度排序，最后，將具體度相同的所有元素，根據在樣式表中出現的順序重新排序。
（5）關於!important 讀者可以在屬性聲明末尾加!important忽略一種樣式。比如：h1{fat-size:200%!important;}這就會忽略掉所有同屬性的作者樣式。
3、如果你在層疊中的規則中沒有找到匹配的屬性，就要用繼承。但不是所有的屬性都能通過繼承得到，比如邊框屬性。對於能繼承的屬性（比如color、font-family、line-height等），瀏覽器從父親開始檢查元素的祖先，給屬性找個指，如果能找到，就是我們要的屬性值。如果那個屬性不能通過繼承得到，或者在祖先規則中也找不到值，那么唯一的辦法就是求助於瀏覽器樣式表中的默認值，所有的瀏覽器對每個元素都有默認樣式。
八、布局和排版（布置元素）
XHTML按道理應該是一種結構和內容格式，可以用CSS樣式化，即使沒用CSS，也應該在任何設備中都能看得見。
1、使用流
瀏覽器用流來布置頁面上的XHTML元素。瀏覽器從XHTML文件的開頭開始，從頭到尾跟着元素的流顯示它遇到的每個元素。比如塊元素，每兩個之間都有換行。所以先顯示文件中的第一個元素，接着顯示換行，再顯示第二個元素，再換行等，從文件的開始一直到末尾。這就是流。
內聯元素在水平方向上一個接着一個地流，從左上方到右下方。（注意，文本時內聯元素的一個特殊例子。）內容從左流到右直到沒有足夠的空間，就放到下一行。注意瀏覽器必須把文本分成不同的幾部分以放置得更好。如果把瀏覽器窗口變窄一些，或者用width屬性把內容區的大小減小一些，那么需要多少行，瀏覽器就用多少行讓內容流入空間。
2、關於流和盒子還要知道的
（1）當瀏覽器並排放置兩個內聯元素時，且這些元素都有邊界時，瀏覽器就會如你所希望的那樣做。它在元素之間創建了足夠的空間，該空間等於兩個邊界之和。如果左邊的元素有10像素的邊界，右邊的有20像素的邊界，兩個元素之間就會有30像素的空間。
（2）當瀏覽器並列放置兩個塊元素時，它把共同的邊界重疊到一起。重疊邊界的高度是最大邊界的值。假如上面元素的下邊界是10像素，下面元素的上邊界是20像素，則重疊的邊界就是20像素。
（3）如果一個元素嵌套在另一個元素中，而它們都有邊界時，會重疊。這種情況下計算邊界的方法是：如果兩個垂直方向的邊界相交，即使一個元素嵌套在另一個元素中，它們也會重疊。注意如果外層的元素有邊框，邊界就不相交，所以不會重疊，但如果把邊框去掉，就會重疊。
3、如何漂移元素
首先，給它一個標識符。例如給某一個段落一個id。
給它設置寬度。
開始漂移。現在我們來添加float屬性。float屬性值可以設置為left或right。
我們分步驟看一下瀏覽器是如何將它和頁面上的其他內容流入的。
（1）首先，瀏覽器跟平常一樣往頁面流入元素，從文件的開頭開始，一直到結尾。
（2）當瀏覽器遇到漂移元素，就把它放到最右邊（假設float屬性值為right）。同時把它從流中移走，就像它漂在頁面上。
（3）因為把漂移段落從正常的流中移走，並用塊元素替代了，那一段落根本就像不在那兒似的。
（4）不過當放置內聯元素時，它們流到它周圍。（當內聯元素被注入塊元素中時，它們流入漂移元素邊界的周圍）
注意，塊元素放置在漂移元素之下（但是內聯元素以及文字不在之下而是流到它周圍），因為漂移元素不再是正常流的一部分。塊元素放置在漂移元素之下，這就意味着假如塊元素有背景顏色，而漂移元素沒有背景顏色（即是透明的），則能透過漂移元素看到下邊的顏色。——塊元素忽略漂移元素，而內聯元素知道它們在那兒。（嵌套在塊元素中的內聯元素通常流到漂移元素周圍，留意漂移元素的邊界，而塊元素跟平常一樣流向頁面）
CSS只允許把元素漂移到左邊或右邊，不允許漂移到中間。
4、CSS的clear屬性
可以設置一個元素的clear屬性，使元素流向頁面時，不允許漂移元素出現在這個元素的左邊、右邊或兩邊。例如設置了頁腳div的這個屬性clear:right; 則當瀏覽器在頁面上放置這個元素的時候，它會注意看有沒有漂移元素會到它的右邊，如果有，它把頁腳向下移動，直到它右邊沒有任何內容為止。現在，無論如何調瀏覽器的大小，頁腳會一直在漂移元素的下面，而不會發生重疊。當你在一個塊元素中設置了clear屬性，它會把一個塊元素向下移直到它的右邊、左邊或兩邊（取決於clear的值）都沒有漂移元素。
5、流動和凍結設計
以上的設計都叫做流動布局，因為無論我們把瀏覽器調整到多大，它們都會擴展到填滿瀏覽器為止。這些布局很有用，因為通過擴展，它們把現有的空間填滿了，並且允許用戶充分利用屏幕空間。不過有時把布局鎖定很重要，以便當用戶調整屏幕時，你的設計看起來還跟原來一樣。有幾個布局是這樣工作的，我們先從凍結布局開始。
（1）凍結布局
凍結布局把元素鎖住，凍結到頁面上，所以它們根本不能移動，因此我們避免了許多窗口擴展帶來的問題。
凍結布局的方法：在你的XHTML中添加一個<div>，命個id如allcontent，這個<div>要包圍頁面中的所有內容。添加CSS規則，將這個<div>中的內容限制為固定寬度。（即width設為固定值，同時加些其他樣式如padding、背景色等）這樣，甚至當瀏覽器重新被調整時也是這個固定寬度，所以我們有效地把<div>以及它包含的所有內容都凍結到頁面上了。
（2）凝膠物布局
凍結布局有幾個好處，但當你把瀏覽器調寬時外觀明顯變差（因為所有空的空間都在右面）。不過我們有一個解決方法，它是一個你能在網站上看到的很普通的設計。這種設計在凍結的和流動的之間，它有一個相應的名字叫凝膠物。凝膠物布局鎖定了頁面中內容區的寬度，但把它放到瀏覽器中央。
布局方式：不是把allcontent<div>的左右邊界固定，而是把邊界設置成“auto”.把邊界設置成“auto”，瀏覽器會計算出合適的邊界是多少，並且保證左右邊界相等，以使內容居中。
6、絕對布置：用CSS在頁面上精確地放置元素
當一個元素被絕對放置了，瀏覽器做的第一件事是把它從流中完全移走。接着瀏覽器把元素放置在top和right指明的位置（或bottom和left）。（注意，top指的是離頁面頂部的距離，其他類似，都是相對頁面邊緣的）
1 #sidebar { 2 width:280px; 3 position:absolute; 4 top:128px; 5 right:200px; 6 }
因為sidebar現在是絕對布置的，它就被移出了流，然后根據所有指定的top、left、right、bottom屬性來放置。因為sidebar不在流中了，其他的元素甚至不知道它在那兒，就完全把它忽略了。流中的元素甚至不把它們的行內容包圍在絕對布置的元素周圍。它們完全被遺忘在頁面上了。（注意，這跟漂移元素稍有不同，因為流中的元素要調整它們的行內容還要考慮到漂移元素的邊界。但絕對布置的元素對其他元素沒有任何影響）
絕對布置的元素可以互相層疊放置。誰在誰上面？每個布置的元素有一個叫做z-index的屬性，用來指定它的層疊位置。哪個元素有較大的z-index值就在上面。例如我們可以給某個絕對布置的元素的z-index屬性設一個很大的值99，，這個元素就位於其他的上面。
（1）默認的position屬性值是什么？是static。static布局把元素放置在正常的文檔流中，並且不用你布置——瀏覽器決定哪個元素放哪兒。你可以用float屬性把一個元素從流中拿出來，可以決定它應該漂移向左邊還是右邊，不過最終還是瀏覽器決定它放置的位置。與之相對的是position的屬性值absolute，用絕對布置，你告訴瀏覽器放置元素的精確位置。
（2）你可以布置任何元素，無論死塊元素還是內聯元素。只是記住當絕對放置一個元素時，就把它從正常的頁面流中移走了。
（3）position屬性值有四個：static、absolute、fixed和relative。fixed把一個元素放置在跟瀏覽器窗口（而不是頁面）有關的位置，所以fixed元素不移動。relative取出一個元素並讓它正常地流到頁面上，然后在頁面顯示之前讓它偏移。relative多用於比較高級的布局和特殊的效果。
（4）如果你沒指定絕對元素的寬度，塊元素默認狀態下會占據整個瀏覽器的寬度，減去你指定的左邊或右邊的偏移。
（5）除了用像素指定位置之外，還有另外一種常用的布置元素的方法，即百分數。如果你用百分數，元素的位置會隨着瀏覽器寬度的改變而改變。例如，如果瀏覽器窗口寬度是800像素，元素的左位置設置成10%，那么就離瀏覽器窗口的左邊80像素。百分數的另一個常用的用途是指定寬度。如果不需要元素或邊界具體的寬度，那么可以用百分數把主內容區和sidebar的大小設置得靈活一些。你會發現在兩欄或三欄布局中這種用法貢獻很大。
（6）但是瀏覽器很寬時，sidebar可能向下蓋過了頁腳。但是絕對布置就不能用clear了，因為流元素忽略了絕對布置元素的存在。
總結：用絕對布置可以把元素放在頁面的任何位置，默認狀態下，絕對布置相對於頁面邊放置元素。如果把一個絕對布置嵌入另一個布置過的元素中，那么它的位置就是相對於布置過的那個包含它的元素。
left、right、top、bottom屬性用來放置絕對、固定和相對布置的元素；用相對布置時，left、right、top、bottom涉及到與元素在正常流中的位置相對的偏移量。
通常使用漂移元素或絕對布置的元素可以完成同樣的設計。
7、分欄
總結幾種兩欄布局的技術，其中沒有一種是完美的，都有一些折衷。
（1）漂移布局
用float屬性，配合clear屬性。漂移元素必須設置一個明確的寬度值，不能是默認的。唯一的問題是這種解決方法會導致內容放置順序的改變，如果你的用戶使用另一種瀏覽器，比如大聲給用戶讀內容的屏幕讀取器，它們也許不會喜歡這種順序。
（2）凝膠物布局
首先通過把頁面中所有的內容用固定大小的<div>包圍來創建一個凍結布局，然后通過用“auto”屬性值讓邊界擴展來做成凝膠物布局。網上許多頁面都用這種設計，這也解決了內容順序的問題。這種方法的缺點是內容不會隨着瀏覽器窗口的變化而擴展。
（3）絕對布局
我們的任務時創建一個流動布局，同時內容順序是我們想要的。我們用了絕對布置達到了我們的目標。不過，還是有個缺點，因為絕對元素不能用clear屬性，瀏覽器變寬時頁腳蔓延到了sidebar下面。
總結：對於你想讓你的布局成為流動的還是凍結的還是凝膠物的，這其實是一個決定哪種最有利於你的頁面工作的問題。一旦決定了，你還要指出哪種方法創建你的頁面（漂移？絕對？結合幾種？）你已經學習了基礎，現在是開始探索的時候了，因為還有許多其他方法，而且每天都有新的被創造出來，以上技術通常作為比較復雜的設計的基礎。多欄布局中用漂移被認為是最靈活的解決方法。謹記，你必須小心內容的順序，它取決於設計。
8、你該知道的關於絕對布置的另外一件事
當你放置一個元素時，你就把它指定為跟最近放置的祖先元素相關的位置。
1 <div id="sidebar"> 2 <div id="tv"> 3 <img src="AsSeenOnTV.gif" alt="As Seen on TV" /> 4 </div>
... ...
1 #tv{ 2 position:absolute; 3 top:100px; 4 left:100px; 5 width:100px; 6 }
如果我們絕對放置“tv”<div>，它的最近放置的祖先是sidebar<div>.所以它的位置就會跟sidebar相對，而不是頁面。
下次討論“最近放置的祖先”，只須說“最近放置的包含塊元素的元素”，這是專家用的術語。
注意，如果你把元素放置為與<html>元素相對，bottom屬性可能就不會如你所願。你也許認為“bottom”是網頁本身的底部，但是<html>元素實際上把它定義為瀏覽器窗口的底部。所以，如果你想把一個元素從頁面底部絕對布置，而不是瀏覽器窗口，你需要把元素放進一個延伸到頁面底部放置的元素中。實現它的一個方法是把元素放進一個相對布置在頁面底部的元素中。
9、固定布置
使用固定布置指定元素的位置和你使用絕對布置一樣，不過這個位置是相對於瀏覽器窗口（叫做視口）邊緣的偏移，而不是頁面。一旦用固定布置放置了內容，它就呆在你放置的地方，再也不懂了，即使你滾動頁面。
如果設為負值，例如left：-90px；就是告訴瀏覽器把圖像放到視口邊緣的左側90像素處，這樣就只能看到保留在屏幕上的那部分圖像了。
注意，IE6.0（以及更早的）版本並不支持固定布置。
10、相對布置
沒有多少人在他們的設計中用到它。不像絕對布置和固定布置，相對布置的元素仍然是頁面流中的一部分，不過在最后一刻，就在元素被顯示之前，瀏覽器偏移它的位置。瀏覽器先把相對元素流到頁面上，然后才把它偏移到要顯示的地方。不過，不像絕對布置，相對布置被定義為相對於元素實際位置的偏移，而不是與最近包含的塊絕對地平行。
無論你如何調整補白和邊界，你還是不能把一個圖像放到它所在盒子的外邊。但用兩行CSS就可以達到更好的效果。你可以用相對布置來讓一個元素在流中越過自己的盒子，以便很好地顯示，用補白和邊界就做不到這點。
11、總結：流動布局是：當你擴大瀏覽器窗口時，頁面內容也隨之擴大來填滿頁面。
凍結布局是：內容的寬度是固定的，不隨瀏覽器窗口的變化而擴大或縮小。這有一個優點是你可以更好地控制你的設計，但代價是不能有效地利用瀏覽器寬度。
凝膠物布局好似：內容區的寬度是固定的，但邊界隨着瀏覽器窗口的變化擴大或縮小。凝膠物布局通常用來把內容放在頁面的中間。它跟凍結的布局有一樣的優點，但總是要更引人注目一點。
九、表格
1、表頭除了常規的放在表格的上面以外也可以放在左邊。只需要將表格表頭元素分別放入每行來代替原先的第一行。把每個<th>元素放在每行的開頭，那么所有的表頭就在第一列了。
2、關於完全只用表格來完成頁面的版面設計：在CSS出現之前，使用表格來完成版面設計是非常普遍的。坦率地說，當時沒有更好的方法來做一些復雜的版面設計。不過，在今天，使用表格做版面設計卻是一個糟糕的方法。如果完全只是用表格，既困難又難以維護。那種技巧已經過時了，應該學習正確的方法，也就是XHTML和CSS做版面設計。
3、要優化你的表格，有兩件事情你要立刻去做：一是添加一個標題，二是添加一個摘要。
摘要就是給table標簽添加summary屬性。摘要不會在你的網頁中顯示出來。它的作用純粹只是增加表格的可讀性，起一小塊文本的作用，還能使屏幕讀取器能夠更好地讀取用戶所描述的表格。
標題，默認狀態下，多數瀏覽器將標題設置在表格上方。如果你不喜歡標題的默認位置，可以用CSS重新定位標題，有些瀏覽器並不完全支持重置標題的默認格式。
將標題移到表格的下部的方法是給table元素添加caption-side屬性，屬性值設為bottom.
4、你可以用表格指定表格式數據之間的關系，然后一般用CSS來改變表格的外觀。
5、表格單元的確包含了補白和一個邊框——正如你在盒模式中看到的——不過表格和盒模式在邊界屬性上有所不同。
單元格包含了內容、補白、邊框，但是用邊框間距屬性來代替邊界，邊框間距（border-spacing）屬性定義在整個表格中，也就是說，我們不能對單個的表格單元而只能對所有的單元格設置邊界屬性。
邊框間距是相對於整個表格的，而邊界只是針對於單個的元素。 IE6不支持邊框間距屬性。
可以在水平和垂直方向上設置不同的邊框間距： border-spacing:10px 30px; 這條語句設置了10個像素的水平邊框間距和30個像素的垂直邊框間距。
壓縮邊框：除border-spacing屬性之外，還有另外一種方法可以處理邊框空間問題。你可以使用CSS中一個叫做border-collapse的屬性來消除邊框間距。使用這個屬性時，瀏覽器將忽略設置在表格上的所有邊框間距，並且將兩個相鄰的邊框合並為一個邊框。這樣就將兩個邊框“壓縮”為一個邊框了。 border-collapse: collapse;
將border-spacing屬性設置為0px也可以消除邊框間距，不過仍存在兩條線，只不過它們緊靠在一起罷了，我們得到的是雙重的虛線邊框。border-collapse: collapse;的方法可以得到單元格之間的單線邊框。
6、實現行擴展和列擴展：在<td>元素中添加rowspan屬性並設置行的數值可以實現多行跨越；在<td>元素中添加colspan屬性並設置列的數值可以實現多列跨越。
7、嵌套表格：將元素<table>放在一個<td>標簽中。
8、使用CSS中的text-align和vertical-align屬性可以改變表格數據的對齊方式（前者可以設置左、右或居中對齊，后者可設垂直對齊方式如設為top即為向上對齊）。使用background-color屬性可以為表格添加一些顏色。背景顏色的設置可以是整個表格、一行或者單個單元格。
9、如果一個數據單元格為空，那么<td>元素中不放置任何內容。不管怎樣，你都需要使用一個<td></td>標記對維持表格的對齊方式。
十、列表
列表的主屬性為list-style-type，此屬性允許在你的列表中控制bullet（或者稱為標志“marker”）。
我們可以在<li>元素中設置樣式，也可以在<ul>元素中設置，元素<li>將繼承<ul>屬性。
eg： li{ list-style-type:disc; } 默認的情況下，標志的類型為圓點。 屬性值也可設為circle（圓圈）、square（方塊）、none（消除所有標志）等。
1、如果想要一個自定義的標志怎么辦？
在CSS中一個叫做list-style-image的屬性允許你把圖像作為列表的標志。
可以用同樣的辦法樣式化順序列表和非順序列表。順序列表有一組標志，這一組標志由數字或字母排列而成，用CSS的list-style-type屬性你可以控制順序列表，不管它是十進制數字、羅馬數字還是字母表字母。通常list-style-type屬性值的取值為十進制數、大寫字母、小寫字母、大寫羅馬數字或小寫羅馬數字。參閱一下CSS使用指南，上面有很多種取值。
2、如何控制列表的文本環繞？也就是說，如何控制讓文本環繞在標記的下面？還是標記環繞在文本的下面？
有一個叫做list-style-position的屬性可以處理這個問題。將此屬性值設置為inside，那么標記位於列表選項中，所以文本就環繞在標記的下面；設置為outside，那么標記位於列表選項的外面，所以標記就環繞在文本的下面。inside your item的意思就是說在列表選項盒邊框里面。
十一、（交互活動）xhtml表單
1、表單基本上就是帶有一塊輸入信息區域的網頁。當提交表單時，表單中的信息被打成一個數據包發送給Web服務器，Web服務器接收來自表單的數據包后，傳給Web應用程序做處理。Web應用程序處理表單中的數據，然后創建一個空白的新XHTML網頁，作為響應傳送回去。瀏覽器接收響應並在屏幕中顯示出來。
（通過單擊“提交”（submit）按鈕控件，來提交表單。單擊按鈕控件就是提示瀏覽器打包所有的數據，並且發送到服務器）
2、你可以將任意的塊元素放入表單中。
3、對於<input>文本和<textarea>，瀏覽器都限制了你可以輸入的文本字數。不過，通常限制的字數比你要輸入的字數要多。如果你需要限制用戶輸入到<input>文本的字數，可以使用maxlength屬性設置其值為一個特定的數字。例如maxlength=“100”限制用戶最多能輸入100個字符。不過，對於<textarea>，XHTML中沒有限制用戶輸入字數的方法。在大多數瀏覽器中，文本域<input>的缺省寬度是20個字符。
4、當瀏覽器將表單數據發送給服務器時，瀏覽器將所有復選框的值合並為一個值連同復選框的名字一起發送。比如，一個有“salt”、“pepper”、“garlic”選項的“spice”復選框，全部選中后，瀏覽器就會發送“spice=salt&pepper&garlic”給服務器。
5、<input>是內聯元素。因此，你只能將塊元素直接嵌入表單，並且如果要在<input>之間添加換行的話，就得插入一個<br />.
6、POST&GET
如果你希望用戶能夠標記網頁，也就是提交表單后的結果，那么久使用get，因為如果網頁用post方式的結果返回，就不能標記網頁了。另一方面，如果你是處理訂單的Web應用程序，那么你不希望你的用戶表舅這個網頁（否則用戶每次返回所標記的頁面，訂單會被再次提交）。當表單中的數據是私人數據時，絕不能用get方式。最后，如果你使用的是<textarea>，你應該用POST，因為你可能會發送大量的數據。get請求方式限制只能使用256個字符，而post在發送的數據大小上沒有限制。
7、用CSS布局表單時非常困難的，所以很多時候用表格布局表單。將表單放入表格中，然后用CSS樣式化表單和表格。（可以對<table><th><td>分別樣式化）
8、舉例：（包含各種元素）
1 <form action="XXX"> 2 <p> 3 Choose your beans: 4 <select name="beans"> 5 <option value="House Blend"> 6 House Blend 7 </option> 8 <option value="Bolivia"> 9 House Blend 10 </option> 11 </select> 12 </p> 13 <p> 14 Type: 15 <br /> 16 <input type="radio" name="beantype" value="whole" checked="checked" /> 17 Whole bean 18 <br /> 19 <input type="radio" name="beantype" value="ground" /> 20 Ground 21 </p> 22 <p> 23 Extra: 24 <br /> 25 <input type="checkbox" name="extras[]" value="giftwrap" /> 26 Gift wrap 27 <br /> 28 <input type="checkbox" name="extras[]" value="catalog" checked="checked" /> 29 Include catalog with order 30 <br /> 31 </p> 32 <p> 33 Ship to: 34 <br /> 35 Name: 36 <input type="text" name="name" /> 37 <br /> 38 Address: 39 <input type="text" name="address" /> 40 <br /> 41 </p> 42 43 <p> 44 Customer Comments: 45 <br /> 46 <textarea name="comments" rows="10" cols="48"></textarea> 47 </p> 48 <p> 49 <input type="submit" name="提交" /> 50 </p> 51 </form>
9、當表單規模開始變大時，把元素組合起來會很有幫助。可以用<div>和CSS完成組合，不過XHTML也提供了一個<fieldset>元素用來組合普通元素，它和<legend>搭配工作。<fieldset>元素包圍了一組輸入元素，<legend>為每個組合提供一個標簽。（XHTML允許使用<fieldset>元素組合表單元素）
10、標簽（<label>元素以一種很簡單的方式給表單元素附加標簽）
以上我們是用簡單文本（simple text）標注了表單，不過，XHTML也提供了一個<label>元素（它們在可讀性上有很大的區別）。這個元素提供了一長串的網頁結構信息，允許你更容易地使用CSS來樣式你的標簽，還可以幫助視力受損者用屏幕讀取器修正信息。要使用<label>元素，首先應該在表單元素中加入id屬性，然后添加一個<label>並設置一個與id相一致的for屬性。（你可以對任何的表單元素使用<label>元素）
eg：
<input type="radio" name="hotornot" value="hot" id="hot" /> <label for="hot">hot</label> <input type="radio" name="hotornot" value="not" id="not" /> <label for="not">not</label>
11、口令：<input type="password">
12、文件輸入
如果你需要將整個文件發送給Web應用程序，你要使用<input>元素，只不過把它的type設置為“file”。設置完畢后，<input>元素會創建一個控件，控件允許選擇文件，而且當表單被提交，文件內容連同余下的表單元素一起發送給服務器。注意，你必須使用POST方式提交表單。eg： <input type="file" name="doc" />
13、多選屬性
在<select>元素中添加一個值為“multiple”的multiple屬性，就可把單菜單變為多菜單。你可獲得一個可替代下拉菜單的多選菜單，這個菜單在屏幕上顯示出所有的選項（如果選項太多，就會出現一個滾動條）。你可以按下ctrl（window）或者command（Mac）來選擇多個選項。
eg：
<select name="beans" multiple="multiple"> <option value="House Blend">House Blend</option> <option value="Bolivia">House Blend</option> </select>