CSS+DIV布局心得

CSS+DIV布局心得

CSS+DIV布局已經變成白菜一樣了，到處都是CSS+DIV布局，去面試一個做網頁的公司，肯定會問，你會CSS+DIV布局不。到底啥是CSS+DIV布局呢？傳統上都是以用TABLE布局的，TABLE布局的要點是有兩個，第一：適當的地方合并行和列，第二：懂TABLE嵌套Table。
而且還可以直接在頁面上控制Table的高度長度。TABLE布局最大的缺點，除了沉長的TR,TD之外，言論最多的就是SEO里對Table布局的鄙視。大部分SEO人都會覺得Table布局不利于SEO優化。這點。。到真是有點關系，我試過兩個完全一樣的網站，一個是用Table布局的，我是用CSS+DIV布局的，并適當的使用了H標記，在GOOGLE搜索上，我CSS+div布局的網站要比Table布局的要靠前。。。至于為什么，那個不是本文的重點。。忽略掉。

   CSS+DIV布局最大的特點就是HTML文件里的代碼相對比較少，但是也造成了瀏覽器布局問題。。網上很多人都在說，我布局在IE里顯示正常，在FF下全部變形了。其實造成這樣問題的原因是你寫的CSS并不標準，可以說你寫的CSS都是根絕IE的標準來寫的，而不是CSS2.0的國際標準，無論是IE還是FF（3.0版前的我沒留意）都是支持CSS2.0的，但是在技術上，IE有寫模糊功能，可以令到非標準的CSS布局也能正確解析，一下是我寫CSS代碼的五個習慣，我不敢說我這五個習慣都是好習慣，至少我寫的CSS布局不會產生不良效果，也就是我寫的CSS有跨l瀏覽器能力。

第一：容器類DIV必須要有5個東西{margin，padding，width，height，overflow}，什么叫容器類，就是這個DIV只是用來放內部的DIV的，也可以說是一個定位的div..例如：我們經常使用居中，一般是這樣做的

body
{} {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    height: 100%;
        width: 100%;
    overflow: auto;
    text-align: center;
    display: block;
}
/**/ /*---body我是作為最頂層容器的---所以它具備了我需要的所有東西，實現的效果是居中，我加上了display: block;雖然這個是一個默認屬性，但是我們不能保證所有瀏覽器都是默認，（如果是所有瀏覽器都默認的，我自己寫個瀏覽器的默認為none的給你耍）*/
#body_Div
{} {
    margin: 0px auto;
    padding: 0px;
    text-align: left;
    width: 1003px;
    height:100%;
    overflow:auto;
}
/**/ /*這個是核心層，多有的元素基本都是在這個層里的，這個層也具備了我想要的屬性，text-align: left; 因為在上層我把文本對齊成為居中，所以這個層我要把它還原為左對齊margin: 0px auto; 一般IE的CSS編寫者不會有這個auto值的，在IE會自動，但是在FF如果少了auto你將會發現FF里你的核心部分不是居中的。所以要做到通用，我們就必須要加上auto值，IE也支持auto值*/

第二：浮動對象，都擁有獨立的父DIV；關于這點。。有意見的人可能不少，持有的觀點就是，“你這樣做只會令DIV過分的多，過于復雜”，其實，我也不想這樣做，但是- -！IE對于浮動對象的{margin，padding}存在BUG所以為了減少一切可能的出錯，我唯有多花費一點代碼，說實在的我只是想它更健康。這個父DIV主要作用其實就是令到內部浮動對象更可控制，這個父DIV就是一個單純的容器DIV

第三：所有的浮動都需要閉合；這個有經驗的人都知道。。用完浮動你肯定需要把它閉合掉的，不閉合，可能不同瀏覽器在解析的時候會把你的浮動變成向下默認，（可以這樣解析：就是元素內部的子元素都默認具有浮動屬性）

第四：一個行向浮動如果超過3個那么請使用UL來實現浮動

第五：靈活使用類選擇，我個人的做法是，所有的id選擇器都是用于布局的，類選擇器都是用于呈現效果的，這樣做的好處就是，當你想要的效果出現問題的時候，更快速地找到錯誤。這個是我有意識的把“架構”和“內容”分離。

明鏡臺