页面布局的理解【div+css】

一说界面的布局不的不提一下跨浏览器的问题，不同的内核对css的解析不一样，如：在ie、firefox和google浏览器下对像素的识别就不一样，1px在这三个浏览器下的大小是不一样的。这是非常让人头大的问题（个人比较喜欢FireFox）。

以前的界面布局大部分采用table来进行布局，个人觉得table布局比较繁琐，你想想要显示一个必须得到TD那里才能，那么要多写多少代码，一个table套另一个table，可能一个table里面套了无数的table，这个代码两实在是让人害怕。所以我个人比较喜欢div+css模式来进行界面布局。因为这种模式使得html代码和显示代码分离，而且灵活性更加的灵活，我这里举一个我真实经历过的例子：以前做的一个项目，在开发过程中突然要说界面不好看，要换掉，但是那时我已经把前台界面布局做好了，当时把我一愣，但是还是窃喜了一下，因为我采用的是DIV+css布局，要改变界面的布局只需改变我的CSS代码，而html文件可以不用动它。你可以试想一下如果是采用table来进行布局，那是多么蛋疼的事！但是div+css也有一定的麻烦，就是浏览器对css的支持不同。

在初期接触div+css时，总是喜欢用什么绝对定位和相对定位，来使得页面更加的稳定，但是后来发现这样做很麻烦，因为有些情况页面内容会变化。于是我接触了采用float属性来实现对页面的布局，float属性有一种引力的作用，假设你前面的div设置了float属性，那么它后面的div也会跟着它一起浮动，有些情况是要使得两个div分别在两行显示，那么该怎么处理呢？我们可以在这两个div之间插入一个div并设置它clear属性为both，也就是清楚前面css所有属性对后面的影响，后面重新开始。还有一点就是注意计算好每个div的宽度，不然也会导致页面凌乱。这种方式的布局方式我一直用到现在，感觉还不错。希望能给你们带来帮助！

在新出的css规则中有些属性能够给前台页面带来更多的效果，但是可能这些新出的属性在一些浏览器上就支持的不是很好如IE6，虽然IE6被微软放弃了，但是在我们国内用IE6的用户还是比较多的，所以要想使得css能够更好的支持不同的浏览器，还是放弃一些新的css属性，但不是说就不学，学习是为以后准备的！谢谢阅读本文！