上一節學習的内容，有一下幾點，可以注意一下。或者說推薦這麼做。
可以給一個标簽設定多個class值，這樣我們可以為每個class應用一種樣式。标簽有多個class的話，就為這個标簽應用了多個樣式。并且之後别的标簽要求重用其中的部分樣式，隻需要設定那個class就好了。
要設定多個class的值，隻需要用空格隔開每個值即可。下面的例子分别設定了背景色、高度、寬度、外框，然後div的設定了多個class：
把整個網頁先從上到下分成若幹塊，每一塊都按下面的思路。
先寫第一層div，可以設定背景色，如果有需要設定高度（height）和垂直居中（line-height），設了高度就是固定的高度，我們要確定内部的元素不會超出。不設高度，這個div的高度就靠内部的元素撐起來。
不要設定寬度。讓它可以撐滿一整塊。
再寫第二層div，這個設定一個像素的寬度。這樣你整塊的内容都限制在這個區域内。如果頁面寬度太小，頁面下方會出現滾動條，而不會導緻這裡面的内容會混亂。
第三層開始可以寫你的内容，可以繼續用div也可以用别的标簽，寬度可以使用百分比了。繼續用像素也ok，不過如果第二次的寬度要調整，并且裡面寬度用的是百分比的話，貌似就是自動調整好了。如果用了float，最後不要忘記clear。
在a标簽裡的img标簽（圖檔），可能在IE上打開的時候，在最外面有一圈藍色的邊框。雖然我在自己的IE11上試了，并沒有，可能舊版本還有這個問題。這個邊框的顔色應該就是超連結字型的顔色，我們所要做的就是把img外面這個邊框去掉。做法也很簡單，寫一個img的标簽選擇器，設定border為0就沒有邊框了。我們可以總是在head裡加上這麼一個标簽選擇器來避免這個問題，而不用擔心對沒有類似問題的用戶端會有什麼影響：
上一節的css内容并沒有講完，這節繼續講後續的内容。
position 屬性定義建立元素布局所用的定位機制。
<code>position: fixed;</code> ：固定在視窗的某個位置。結合top、right、botom、left，确定固定的位置。
在頁面右下角放置一個傳回頂部的按鈕，用position定位：
這裡并不能實作傳回頂部的效果，我們還需要後面才會學的JavaScript才能實作點選之後傳回頁面頂部。
再來實作一個始終顯示在頁面頂部的菜單：
和之前學的float一樣，這裡使用position樣式之後，div也不再撐滿一整行了。我們通過設定left和right屬性，讓他往兩邊都撐滿了。下面的菜單2是沒有設定left和right的效果。
另外，因為使用position，會有一個分層的效果。下面的div标簽的内容也是從頁面頂部開始顯示的。為了不讓菜單蓋住主要内容，我們給下面的div設定了外邊距（margin-top）。分開了兩部分的内容。
這個和fixed都是決定定位。是以主要來看看和fixed的差别。把上面的傳回頂部的例子裡的position屬性修改為absolute，看看效果。乍一看，貌似一樣，但是如果滾動滾輪，就是發現，他會一起移動。也就是absolute絕對定位了之後，就會固定在父級元素之上。
把上面菜單的例子也改成absolute，菜單依然在頁面頂上，但是往下流量頁面 後，菜單就會向上滾出螢幕了。
ablolute單獨的應用場景不多，主要是結合下面要将講的相對定位一起使用。把一個元素絕對定位到另一個相對定位的元素上。
上面測試absolute的時候提到，他是絕對定位到它的父級元素上的。上面的例子中實際是決定定位在了整個頁面上。如果要将它定位在另外一個元素裡，簡單的在外層加上一個元素标簽是沒用的。還需要在元素上加上 <code>position: relative;</code> 這個屬性，才會被識别為 absolute 的父級标簽。
設定偏移量：這裡也有top、right、bottom、left屬性。這裡設定的偏移量。如果設定偏移屬性，就是相對于其正常位置所進行的偏移。
用了position屬性之後，通過 <code>margin: 0 auto</code> 無法實作居中了。那麼現在居中要怎麼做呢。
偏移量的屬性不但可以使用像素（px），也是可以使用百分比的。設定為50%自然就居中了。但是這裡定位是元素的起始位置，即左上角而不是中心。是以還得計算元素高度和寬度的一半，用外邊距把元素撐回去：
元素應用了position屬性之後，就會出現分層的情況。position元素會始終位于其他标準元素的上層。如下的例子，無論div的先後順序如何，都是position元素在上層：
如此，我們就把頁面分成了2層。那麼有2層，就能有3層甚至多層。
z-index 屬性，設定元素的堆疊順序。僅能在定位元素上奏效（例如 position:absolute;）。數值越大，處于外層，可以是負數。不設定的話應該是0
例子中，如果不設定z-index，或者值設定的一樣，那麼層級的關系就是不确定的。調整标簽的順序，效果會不一樣（後面的标簽會蓋住前面的）。設定了z-index後，我們就能确定定位元素的層級關系。
上面已經學了網頁的層級，下層的頁面會被上層的頁面覆寫掉。這裡我們可以設定标簽的opacity屬性，使得上層頁面不是完全覆寫下面的内容，而是有一點的透明度。
opacity 屬性，透明度。取值範圍從 0.0 （完全透明）到 1.0（完全不透明）。
我們可以設計一個這樣的頁面。平時顯示正常的内容（這是第一層）。當我們點選了一個按鈕需要送出資料的時候，這時候需要屏蔽掉使用者對之前的頁面内容的操作。這時候出現一個第二層，半透明的覆寫層，就如透明度裡的例子那樣。然後再在頁面的中間彈出一個表單（第三層），讓使用者送出資料。這三層的代碼大概是這樣的：
直接打開頁面，應該隻顯示了第一層的内容，另外兩層暫時設定了 <code>display :none;</code> 隐藏了。這裡JS還沒學，網頁的内容裡可以加上一個按鈕，觸發一個JS，修改一下.disappear裡的display屬性，改成unset（就是沒有設定）。這裡我們隻能暫時先手動改一下看一下效果了。修改後，第二層和第三層的内容就都顯示出來了。先覆寫掉頁面的内容，此時使用者無法在選擇第一層的内容了。然後中間是彈出的互動界面，使用者可以輸入内容送出表單，或者是以後會學的其他互動内容。
先來看一下顯示圖檔的例子。找一張大一點的圖檔，然後放在一個div裡。div設定小一點的高度和寬度。效果如下：
這裡雖然div設定了範圍，但是div中的圖檔會按照正常尺寸顯示出來，并沒有受到上一層div标簽尺寸的限制，即溢出了。後面還加了一個div，可以看到是接在前一個div的範圍後顯示的。
要處理這個問題，我們可以為圖檔也設定一個尺寸，比如：<code>style="height: 100%"</code> 。這樣可以顯示出整張完整的圖檔，但是會自适應一個尺寸。
這裡要講的是通過在div裡設定overflow屬性，來處理溢出内容的處理規則（圖檔尺寸不變）。
<code>overflow: hidden;</code> ：内容會被修剪，并且其餘内容是不可見的。
<code>overflow: auto;</code> ：如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。
<code>overflow: scroll;</code> ：同上，和auto一樣。
這裡拿圖檔舉例，但是實際應用中，各種可能會有溢出的情況都可以這麼處理。一般圖檔的處理更多的應該是設定一個img的尺寸，做一下縮放。而在一個有限大小的區域内要顯示很多的文字，更加适合用overflow：
當滑鼠移動到元素上時，才會生效的css屬性。下面是一個菜單的例子，應用了hover實作了當滑鼠放上去的時候，指向的那項會改變樣式：
另外這裡a标簽樣式的設定也值得參考。這裡設定了 <code>display: inline-block;</code> ，使得a标簽的高度可以撐滿整個div的高度。如果注釋掉display，a标簽的高度就隻有文字的那點高度（可以通過滑鼠懸停看到效果）。橫向的寬度這裡推薦是用内邊距（padding）撐開的。
之前都是用background設定背景色，我們也可以用圖檔當背景。代碼如下：
這裡的效果會重複使用這張圖檔平鋪在整個區域中。圖檔的比例不變，多出的部分會裁剪掉。
利用平鋪的特性，可以實作漸變色背景的效果。做一個寬1像素，長1000像素的漸變圖檔，在這張圖檔裡搞好漸變，然後作為背景圖檔。被平鋪之後，就是一個漸變色背景了。這個方法應該是通用的。
在上面的基礎上，再增加一個background-repeat屬性可以顯示圖檔進行平鋪。
<code>background-repeat: no-repeat</code> ：不允許平鋪
<code>background-repeat: repeat-x</code> ：隻能橫向平鋪
<code>background-repeat: repeat-y</code> ：隻能縱向平鋪
有這麼一張圖：
好吧，是很多個小圖示拼成的一張圖，現在要顯示其中的一個圖示。我們可以這麼做：
這樣顯示第一個圖示沒問題，如果要顯示下面的圖示，我們需要把圖檔往上移，這就用到了background-position屬性，給背景圖做一個定位：
background-position-x 和 background-position-y 是單獨調整x軸和y軸。
上面的background屬性還可以簡寫成這樣：<code>background: url(2.png) 1px -119px no-repeat;</code> ，圖檔路徑、縱向位移、橫向位移、是否平鋪。
這樣做的好處是，一次請求就獲得了好幾個圖示，減少了用戶端和服務端的互動次數。如果每一個小圖示都儲存一張獨立的圖檔，那麼每次要擷取到一個新圖示可能還會發起一次請求。是以對于這種小圖示可以拼接在一張圖中使用。
做一個右邊有圖示的input框，類似這樣的：
運用上面講的定位和背景圖檔的方法，把圖示定位到方框的右邊。
這裡要注意，input的文字的輸入範圍右邊要小于整個邊框的範圍，否則最右邊的内容會被圖示擋住。
<code></body></code>
<code></code>
<code>本文轉自騎士救兵51CTO部落格，原文連結：</code>http://blog.51cto.com/steed/2071774，如需轉載請自行聯系原作者