DIV+CSS网页布局心得

DIV+CSS⽹页布局⼼得
我们在⼀直强调交流的重要性，只有通过交流才能发现⾃⼰的不⾜，才能明确的知晓⾃⼰到底掌握了多少知识，哪些地⽅不⾜，哪些地⽅已经掌握，今天与⼤家分享⼀位jb51⽹友的DivCSS⽹页布局⼼得。

DIV+CSS是⽬前互联⽹⽹页制作最热门的⽅法，但对于完全⼿写代码，许多⽹页设计师都望⽽⽌步。

其实DIV+CSS是很简单的⼀种布局⽅式，甚⾄⽐任何⼀种编程语⾔都要简单(虽然它不能算是编程语⾔)。

⾸先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有⽤DW画布局表格的思维⽅法忘的⼀⼲⼆净(如果你以前是⽤TABLE布局的话)，然⽽这项技术更适合刚接触⽹页制作的⼈。

然后你要知道，DIV+CSS是⾼成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这⾥，你⼀定对DIV+CSS的好处也有⼀定的了解了。

最后你还得知道，你所⽤的⼯具，你可能认为Dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使⽤了这门技术，你就可以在任何⽂本编辑器中编写⽹页，甚⾄在记事本中，⽽dreamweaver只是充当⼀个⽂本编辑器的⾓⾊，⽽你所有的⼯作基本都在代码视图中完成，在这⾥我推荐adobe最新的dreamweaver cs4。

当然如果CS5出现了我也会去试⽤它。

切⼊正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局⽅法区分开来，并不是说⼀个页⾯⾥没有TABLE，⽽是在什么地⽅使⽤TABLE，你要认识到TABLE是表格，是存放数据⽤的，⽽不是⽤来布局的。

接下来是布局思维⽅式，可能⼤家在接触DIV+CSS的时候⽆从下⼿，我现在向⼤家推荐最著名的盒⼦模型，我也是看了这个模型后⼀下⼦就开窍了。

你可能会说，好多英⽂看不懂，不过我告诉你，很抱歉那三个英⽂你必须记住，⽽且是最重要的三个，你可以把这么个盒⼦看成⼀个DIV，⽽所有标签都带有这三个属性。

正如你所见到的这个是⼀个⽅块，⽽⽹页呢，是由这么多⼤⼤⼩⼩的⽅块组成的，可能以下实例会更明确的让你了解这个盒⼦。

我在这⾥借⽤了新浪博客的盒⼦来说明下，⼤家可能发现了，其实边框border往往就只有1px的宽度，谁叫它是边框呢。

⽽外补丁margin呢，它代表了DIV(盒⼦)和DIV(盒⼦)之间的距离，⽽内补丁padding则是⼤盒⼦(DIV)和⾥⾯的盒⼦(DIV)的距离(盒⼦(DIV)⾥⾯可以放盒⼦(DIV)哦)。