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选择器都是用于布局的，类选择器都是用于呈现效果的，这样做的好处就是，当你想要的效果出现问题的时候，更快速地找到错误。这个是我有意识的把“架构”和“内容”分离。