web前端如何让网页布局稳定性和标准性？

刚开始学CSS+div布局的同学们，都比较困惑和难写的就是兼容性的问题了，特别是ie6等低版本的浏览器，随意国内逐步慢慢消失取代，但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的，完整的，兼容性好的呢？因此再这里，小强老师给大家列出网页布局标准性、合理性和兼容性的一些方法，希望对刚开始学习css的同学有所帮助。

一、<!DOCTYPE>标记的重要性。

位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，我们必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。<!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给浏览器，这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少中显示效果，这是不被允许的。

二、合适地方用到合适的标签

物尽其用人尽其才。再合适的地方用到合理的标签，对网页布局和优化都有很多的好处，比如logo，一般我们都用h1标签包括。还有理解行内元素和块级元素的区别。一个页面不要只用div，太多反而太泛滥了。table虽然用的少，但是，再做一些数据处理的时候，还是比较好用的。比如下面的，肯定用列表ul了。

三、站在标准流的角度看padding和maring 、width等属性稳定性

我们知道页面布局的时候，控制盒子位置距离等，有盒子本身大小，padding和margin来做。先看如下图，再火狐的firebug中看他们三者的显示。因此，再这里我们会根据稳定性来看这三者的先后顺序：其中稳定性最好的就是盒子本身的高度和宽度了，我们优先考虑这个。因此，很多情况下，我们会考虑利用高度剩余法，宽度剩余法来做，而不是padding和margin。比如下图：这个评论和下面的文本域框有个小距离，此时，我们给这个评论一个h2标签，高度正好从评论上方，到文本域上的高度就好了，如图黄色部分所示。h2里面文字内容默认是靠左上对齐的，高度用不了，就剩下了，这就是高度剩余法。其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。

四、标准流、浮动流和定位的稳定性

标准流再里面是最稳定的，就是块级元素上下显示，行内一行显示，都是最稳定的。浮动和定位都“脱标”了，稳定性没那么稳定，所以，我们应该遵循如下原则：页面布局，能用标准流去做的不用浮动去做，如果要用浮动做的，就不用定位去做。

五、知己知彼百战百胜

总会有特殊的浏览器，比如ie6 ，这些奇葩浏览器总是有自己独到的地方，那我们怎办？兵法云，知己知彼百战百胜，因此，需要我们详细的了解这些浏览器自己独特的特性，或者掌握他们IE6常常出现的bug，以及对于css的理解，那么我们根据他们的不同解析，写出合理的布局。

六、不要让清除内外边距带来麻烦

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

这句话，大家都知道，清除浏览器样式的。但是如果你不加，不同浏览器肯定显示不太一样。所以，css的第一句话就是它。还有就是要使用大部分浏览支持的css属性不至于引起不必要的麻烦。

以上几点，是小强老师，给大家总结的几点，希望对新学习的同学有所帮助。

小强零零壹和大家一起分享