本文檔包括CSS的 樣式 定位 框模型
如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。
您可以通過 background-p_w_upload 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：
body
{
background-p_w_picpath:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-p_w_upload:fixed
}
可以利用 background-position 屬性改變圖像在背景中的位置
background-position:center;
如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。
body
{
background-p_w_picpath: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
縮進文本
把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果
CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。
p {text-indent: 5em;}
字間隔
word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值爲 0 是一樣的。
word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那麼字之間的間隔就會增加。爲 word-spacing 設置一個負值，會把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字間隔
word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值爲 0 是一樣的。
word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那麼字之間的間隔就會增加。爲 word-spacing 設置一個負值，會把它拉近：
字母間隔
letter-spacing 屬性與 word-spacing 的區別在於，字母間隔修改的是字符或字母之間的間隔。
但是對於漢字來說word-spacing不起作用，letter-spacing屬性才能控制兩個漢字之間的距離
HTML列表
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
.Coffee
.Milk
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器顯示如下：
Coffee
Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
Black hot drink
Milk
White cold drink
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
CSS position 屬性
通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute
元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。
position：relative
相對定位回按照元素的原始位置對該元素進行移動
position：absolute
通過絕對定位，元素可以放置到頁面上的任何位置。
position:fixed
固定定位，滾動條無論如何滾動，它始終位於窗口的某一個地方
如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行爲
overflow：scroll 用滾動條顯示，出現滾動條
overflow:hidden 隱藏超出部分內容
clear 屬性規定元素的哪一側不允許其他浮動元素
圖像的左側和右側均不允許出現浮動元素：
img
{
float:left;
clear:both;
}