1: ID用于標(biāo)識(shí)頁(yè)面單獨(dú)元素以及持久行的結(jié)構(gòu)性元素 方便JS的調(diào)用
類(lèi)用于標(biāo)識(shí)同一頁(yè)面可重復(fù)定義使用的結(jié)構(gòu)性元素 ID與類(lèi)的命名需與表現(xiàn)形式無(wú)關(guān) ：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫(xiě)（標(biāo)志符由多個(gè)單詞組成 除首詞首字母小寫(xiě)外 其余單詞首字母均大寫(xiě)）”
2：避免濫用類(lèi) 當(dāng)類(lèi)型的結(jié)構(gòu)需要不一樣的表現(xiàn)時(shí) 記得什么是層疊樣式表 具體結(jié)構(gòu)中的p a h1等可使用如下方式：div.sideBar p{}定義即后代選擇器+ID或類(lèi)選擇器組合方式。
3：DIV與SPAN IV（塊級(jí)框）用于對(duì)塊級(jí)元素的分組 SPAN（行內(nèi)框）用于對(duì)行內(nèi)元素分組標(biāo)識(shí)
4：對(duì)于頁(yè)面基本默認(rèn)的方式可以選擇通用選擇器（*標(biāo)識(shí)）進(jìn)行定義 * { padding：0; margin:0;}
5: body 也是可以添加ID和類(lèi)的 這樣就可以為其添加特別樣式。
6:樣式表中導(dǎo)入樣式表需在頂端 覆蓋規(guī)則為本身樣式覆蓋導(dǎo)入樣式。
7：CSS樣式表細(xì)分化 顏色 布局 風(fēng)格 表單 均可分離 這樣對(duì)以后的修改和風(fēng)格設(shè)計(jì)更方便。
8：盒模型：內(nèi)→外
| 以下是引用片段： content←width height(補(bǔ)充：height只有在父元素定義了絕對(duì)高度時(shí)其%才有意義) border padding（內(nèi)補(bǔ)丁）-“填充” background-image background-color margin(外補(bǔ)丁)-“空白邊”透明 可為負(fù)值 |
記住:在css中 width是指內(nèi)容區(qū)域的寬度
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 內(nèi)補(bǔ)丁和邊框被算在內(nèi)容寬度里面
#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750px FF/OP：780px
IE怪異模式:有效內(nèi)容寬度：750-20-10 FF/OP：750
IE6正常模式下：同于FF/OP
處理方法：在父元素或子元素中使用padding 本身不使用
空白邊疊加：當(dāng)兩個(gè)空白邊疊加時(shí) 頂或底邊將會(huì)疊加 實(shí)際空白邊高度=空白邊大的值
例：
| 以下是引用片段： <div id="top" style="margin:0 0 10px 0;"></div><div id="bottom" style="margin:20px 0 0 0；"></div> |
但是如果這個(gè)時(shí)候你添加邊框或則填充，將不再疊加
//定位機(jī)制//
9：相對(duì)定位（relative）：相對(duì)于其默認(rèn)初始位置 絕對(duì)定位：相對(duì)父級(jí)元素或畫(huà)布、HTML元素 與文檔流無(wú)關(guān) 可覆蓋其他元素 使用Z-INDEX 控制其層次。IE5.5/IE6下 對(duì)right bottom時(shí) 需設(shè)定框的寬高 后則根據(jù)畫(huà)布右底定位。
絕對(duì)定位（absolute）
10：float浮動(dòng)：記住：“在標(biāo)準(zhǔn)瀏覽器中 浮動(dòng)元素脫離了文檔流 不占據(jù)外圍容器空間” 明白了這點(diǎn) 你就會(huì)明白為什么IE和FIREFOX下表現(xiàn)的不同了。IE5.5、IE6浮動(dòng)元素依然占據(jù)外圍容器空間
例如：怎么在IE下feeter正常 在firefox下就跑上去了呢？
IE下 當(dāng)float和text-align定義的方向一樣時(shí) 出現(xiàn)雙倍錯(cuò)誤：
| 以下是引用片段： select{float:left;text-align:left;margin:0 10px;} |
實(shí)際左邊margin-left：20px；FF/OP：10px 解決：加上display：inline；
11：徹底理解 “清除浮動(dòng)”clear
clear：none、left、right、both、
表示當(dāng)前框元素哪些邊不應(yīng)該挨著浮動(dòng)框
理解了10中float在不同瀏覽器下的表現(xiàn) 你也就知道如何去使用清楚了。
12：背景圖像的定位：只談百分比 background:url(image-url.gif)no-repeat 20% 30% 20%：將圖像X軸20%處與父元素X軸20%處重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%
13：滑動(dòng)門(mén)/
左右兩個(gè)DIV 背景分別定義 一般左背景圖像比較長(zhǎng); 左背景定位：left center 右背景定位：right center
外部控制容器寬度一般小于等于兩個(gè)背景和 這樣當(dāng)內(nèi)容動(dòng)態(tài)變化時(shí)候 右背景圖像便感覺(jué)像在左背景圖像上滑動(dòng)，故名。
這樣也可以實(shí)現(xiàn)：<div id="nav"><ul><li><a href="index.html"><span>首頁(yè)</span></a></li></ul></div>
| 以下是引用片段： css： #nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;} #nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff} |
原理相似，注意背景圖像定位。
14:完美的居中布局：
| 以下是引用片段： body{text-align：center；mini-width：760px；} div#wrapper{margin：0 auto；text-align：left；width：750px；} |
mini-width IE并不認(rèn)識(shí) 這是為老瀏覽器準(zhǔn)備的，只是這個(gè)值比你需要的實(shí)際頁(yè)面大就OK
15:小圖標(biāo)有時(shí)會(huì)給頁(yè)面增色不少 用前記得規(guī)劃好 整到一張大圖片上 這樣可以減少服務(wù)器請(qǐng)求次數(shù)。
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號(hào)