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

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

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

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

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

物尽其用人尽其才。 再合适的地方用到合理的标签，对网页布局和优化都有不少的好处，好比logo ，通常咱们都用h1 标签包括。 还有理解行内元素和块级元素的区别。

一个页面不要只用div，太多反而太泛滥了。table虽然用的少，可是，再作一些数据处理的时候，仍是比较好用的。好比下面的，确定用列表ul了。

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

咱们知道页面布局的时候，控制盒子位置距离等，有盒子自己大小，padding和margin来作。
先看以下图，再火狐的firebug中看他们三者的显示。


所以，再这里咱们会根据稳定性来看这三者的前后顺序：
其中稳定性最好的就是盒子自己的高度和宽度了，咱们优先考虑这个。 所以，不少状况下，咱们会考虑利用高度剩余法，宽度剩余法来作，而不是padding和margin。
好比下图：

这个评论和 下面的文本域框有个小距离， 此时，咱们给这个评论一个h2标签，高度正好从评论上方，到文本域上的高度就行了，如图黄色部分所示。


h2 里面文字内容默认是靠左上对齐的，高度用不了，就剩下了，这就是高度剩余法。

其次，咱们才考虑padding ，由于padding也能够看作特殊的盒子高度和宽度，最后咱们再用margin来作。由于margin会有边距合并的问题。

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

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

5、知己知彼百战百胜

总会有特殊的浏览器，好比ie6 ，这些奇葩浏览器老是有本身独到的地方，那咱们怎办？ 兵法云，知己知彼百战百胜，所以，须要咱们详细的了解这些浏览器本身独特的特性，或者掌握他们IE6经常出现的bug，以及对于css 的理解，那么咱们根据他们的不一样解析，写出合理的布局。

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

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属性不至于引发没必要要的麻烦。

以上几点，是小强老师，给你们总结的几点，但愿对新学习的同窗有所帮助。

小强零零壹 和你们一块儿分享