學(xué)習(xí)CSS制作網(wǎng)頁總結(jié)的一些經(jīng)驗(yàn)
2024-07-11 08:24:38
供稿：網(wǎng)友
讓你使用DIV CSS排版 不是讓你用換個(gè)標(biāo)簽然后再去按照表格的方式去排版
而是做到內(nèi)容與表現(xiàn)的分離
1: ID用于標(biāo)識(shí)頁面單獨(dú)元素以及持久行的結(jié)構(gòu)性元素 方便JS的調(diào)用
類用于標(biāo)識(shí)同一頁面可重復(fù)定義使用的結(jié)構(gòu)性元素 ID與類的命名需與表現(xiàn)形式無關(guān) ：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫（標(biāo)志符由多個(gè)單詞組成 除首詞首字母小寫外 其余單詞首字母均大寫）”
2：避免濫用類 當(dāng)類型的結(jié)構(gòu)需要不一樣的表現(xiàn)時(shí) 記得什么是層疊樣式表 具體結(jié)構(gòu)中的p a h1等可使用如下方式：div.sideBar p{}定義即后代選擇器 ID或類選擇器組合方式。
3：DIV與SPAN IV（塊級(jí)框）用于對(duì)塊級(jí)元素的分組 SPAN（行內(nèi)框）用于對(duì)行內(nèi)元素分組標(biāo)識(shí)
4：對(duì)于頁面基本默認(rèn)的方式可以選擇通用選擇器（*標(biāo)識(shí)）進(jìn)行定義 * { padding：0; margin:0;}
5: body 也是可以添加ID和類的 這樣就可以為其添加特別樣式。
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>
空白邊高度為20px
但是如果這個(gè)時(shí)候你添加邊框或則填充，將不再疊加
//定位機(jī)制//
9：相對(duì)定位（relative）：相對(duì)于其默認(rèn)初始位置 絕對(duì)定位：相對(duì)父級(jí)元素或畫布、HTML元素 與文檔流無關(guān) 可覆蓋其他元素 使用Z-INDEX 控制其層次。IE5.5/IE6下 對(duì)right bottom時(shí) 需設(shè)定框的寬高 后則根據(jù)畫布右底定位
