學習CSS製作網頁總結的一些經驗

使用DIV+CSS排版不是用換個標籤然後再去按照表格的方式去排版，而是做到內容與表現的分離。

1: ID用於標識頁面單獨元素以及持久行的結構性元素 方便JS的調用

類用於標識同一頁面可重複定義使用的結構性元素 ID與類的命名需與表現形式無關 ：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫（標誌符由多個單片語成 除首詞首字母小寫外 其餘單詞首字母均大寫）”

2：避免濫用類 當類型的結構需要不一樣的表現時 記得什麼是層疊樣式表 具體結構中的p a h1等可使用如下方式：div.sideBar p{}定義即後代選取器+ID或類別選取器組合方式。

3：DIV與SPAN IV（塊級框）用於對區塊層級元素的分組 SPAN（行內框）用於對行內元素分組標識

4：對於頁面基本預設的方式可以選擇通用選取器（*標識）進行定義 * { padding：0; margin:0;}

5: body 也是可以添加ID和類的 這樣就可以為其添加特別樣式。

6:樣式表中匯入樣式表需在頂端 覆蓋規則為本身樣式覆蓋匯入樣式。

7：CSS樣式表細分化 顏色 布局 風格 表單 均可分離 這樣對以後的修改和風格設計更方便。

8：盒模型：內→外

以下是引用片段：
content←widthheight(補充：height只有在父元素定義了絕對高度時其%才有意義)
border　
padding（內補丁）-“填充”　
background-image　
background-color　
margin(外補丁)-“空白邊”透明可為負值

記住:在css中 width是指內容地區的寬度

IE/WIN與盒模型：

IE5.5/IE6怪異模式下： 元素框總寬度=content.width+margin.width

FireFox/Opera/..　 :　元素框總寬度=content.width+padding.width+border.width+margin.width

差異在於：IE5.5/IE6怪異模式下 width=有效content.width+padding.width+border.width 內補丁和邊框被算在內容寬度裡面

#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750px FF/OP：780px

IE怪異模式:有效內容寬度：750-20-10 FF/OP：750

IE6正常模式下：同於FF/OP

處理方法：在父元素或子項目中使用padding 本身不使用

空白邊疊加：當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值

例：

以下是引用片段：
<div id="top" style="margin:0 0 10px 0;"></div><div id="bottom" style="margin:20px 0 0 0；"></div>

空白邊高度為20px

但是如果這個時候你添加邊框或則填充，將不再疊加

//定位機制//

9：相對定位（relative）：相對於其預設初始位置 絕對位置：相對父級元素或畫布、HTML元素 與文檔流無關 可覆蓋其他元素 使用Z-INDEX 控制其層次。IE5.5/IE6下 對right bottom時 需設定框的寬高 後則根據畫布右底定位。

絕對位置（absolute）

10：float浮動：記住：“在標準瀏覽器中 浮動元素脫離了文檔流 不佔據外圍容器空間” 明白了這點 你就會明白為什麼IE和FIREFOX下表現的不同了。IE5.5、IE6浮動元素依然佔據外圍容器空間

例如：怎麼在IE下feeter正常 在firefox下就跑上去了呢？