其实早就想研究一下DIV+CSS，因为从最初自己学习做网页开始，就一直是用TABLE+CSS方式，那会儿最早接触的是微软的Frontpage，记不清是1999年还是2000年，大概那会就是从它开始做自己的个人主页，用了一段时间之后，才转向Dreamweaver。不过还是继续在用Table表格的方式来布局页面，但页面样式是CSS方式来控制。当时初学那会儿并不知道有DIV这个么东西，就一直在用表格折腾页面，倒也觉得表格也挺好布局的，至少想到什么样子，PS里做好模板，然后DW里面去使用TABLE来弄出大框架，之后PS里切图分割，再到DW去用图片之类去填充框架，最后就是写好各部分的CSS样式表定义，我自己折腾页面的大致流程是这样，也就这么着用了好多年，因为我不是专门学这个，都是自己学的，没人教，也没看过什么关于做网页的书，就是当年为了学习Flash做动画，买过两本动画制作实例的书，做些简单的Flash动画，太复杂的多场景的，需要ActionScript的那种的研究不来，本身我对编程就一点兴趣没有，看到代码就头疼，当然，HTML代码除外，其他什么ASP，PHP代码看到就头晕，呵呵，不知道为什么，可能天生就不是编程搞开发的那块料。好了，就罗嗦这么多吧，下面开始自己学习DIV+CSS的一点心得，用博文记录一下，也希望对想学习的人有个帮助。
先说说DIV吧，网上搜索说是division的简写，金山词霸上的解释：1. 分开; 分配2. 部门3. 界限4. 分歧, 分裂5. 除(法)6. 分组表决7. 分离；分切；划分；分隔8. 分享；分配；分发，分派；分担9. 划分物；分隔物，分割物，隔开的，栅栏隔板，隔墙10. 分界线；分界标志，分界记号11. 刻度，标度，分度。按照我自己的理解，DIV应该是第9个意思，作为网页里分割用的，暂且理解为块吧，有些人称之为盒子，不管咋样，你自己有个理解就好，我理解的就是一个块，网页中的一个块元素，可以用来布局页面框架，定位页面上的各种元素，文字、图片、动画什么的等等。
经过Google之后得知，HTML的各个元素是有自己的显示属性的，显示属性有三种：Block、Inline、None，Block的意思就是元素以块的方式显示，这种显示方式的元素独占一行，如果没有定义宽度，那它的宽度就是页面当前的宽度，或者是它的父元素的最大宽度，它的前后各有一个换行，如果它上面有一个块或者其他元素，它要新换一行来显示自己，它之后的元素也会在它下面一行显示。我们熟知的DIV的显示属性默认就是这种Block方式。Inline是行内显示，有些元素默认就是这种显示方式，比如Span，比如，Span内的文字，有多少字，它的宽度就是多少，只占用它需要的宽度，但是它不是独占一行，Span后面你还可以接着再来一个Span，后一个Span内的内容会紧接着上一个之后显示，不会自动换行，除非遇到父元素宽度的限制，或者换行符。None就是不显示，有些HTML元素默认就是这种属性，是那些用来定义HTML特殊内容的，比如META和Style等标签，是不会显示在页面上的。当时看完这些内容，我第一个想知道的就是哪些HTML元素天生或者默认是Block方式显示，那些是Inline显示呢？嗯，我想你也有着想法，看下面吧。
默认以Block方式显示的HTML元素：
<div><h1><p><ul><ol><dl><li><dt><dd><table><blockquote><pre><form>
默认以Inline方式显示的HTML元素：
<span><a><strong><b><em><i><img><input><abbr><acronym><br>
这样看来，我自己对DIV的理解稍微有一点点问题，也不算大问题，它确实是一个块，默认情况下，但是它的显示属性是可以定义的，如果是display:inline的话，那div换了一种显示方式，它的后面还可以继续有其他的元素显示。同样，默认是inline显示方式的元素，同样可以通过display:block来定义它作为一个块来显示。不是一成不变，根据自己的实际需要来决定吧，我想DIV+CSS的优势就体现在这里吧，很灵活，可控，按需配置。所以现在想想，即便说是DIV+CSS也做页面，其实你也可以用使用其他元素，并不一定非要用DIV这个元素，可用的HTML元素可是很多哦。
弄明白了上面说的，我自己就大致已经清楚了怎么用DIV+CSS来给网页搭框架了，春节前，博客改版了一下（之前是TABLE+CSS的），就是边研究，边用DIV+CSS把博客模板从新布局了一下，基本上和以前的TABLE+CSS的框架一样，但是细节上改进了很多，毕竟DIV+CSS可控制的东西很多，只要你定义好了CSS，页面上的各种东西，你都可以用CSS来控制它的显示效果。对于后期维护和更新内容，无疑DIV+CSS有着更好的灵活性和可控性。在改版博客页面架构的时候，还是有很多CSS的属性定义和写法没搞明白，什么position，float啊等等，等我搞明白了再写出来吧。还有就是DIV+CSS这玩意浏览器的兼容性问题让人很头疼，同一个页面，各种浏览器显示的效果会有差别，当然，这牵扯到W3C的标准问题，最变态的浏览器当属Firefox，丫的是最W3C的，连HTML里注释行的要求都非常严格，如果你的注释方式不符合W3C标准的注释方式，那你的页面在Firefox里显示的就面目全非了，没事的话，可以自己试试看，我就不献丑了。[Edit on 2011-2-7 22:24:12 By 笑傲江湖]
