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

本是古典何须时尚 2022-08-07 04:40 170阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:757px; color:rgb(68,68,68); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:12px; line-height:18px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word; font-size:14px"> 刚开始学css+div布局的同学们，都比较困惑和难写的就是兼容性的问题了，特别是ie6等低版本的浏览器，随意国内逐步慢慢消失取代，但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的，完整的，兼容性好的呢？ 一、&lt;!DOCTYPE&gt; 标记的重要性。 位 于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范，我们必需在开头处使用&lt;!DOCTYPE&gt;标记为 所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有 效的XHTML文档，并按指定的文档类型进行解析。 &lt;!DOCTYPE&gt; 标记和浏览器的兼容性相关，删除&lt;!DOCTYPE&gt;，就是把如何展示HTML页面的权利交给浏览器， 这 时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少中显示效果，这是不被允许的。 二、合适地方用到合适的标签 物尽其用人尽其才。 再合适的地方用到合理的标签，对网页布局和优化都有很多的好处，比如logo ，一般我们都用h1 标签包括。 还有<a href="http://www.xiaoqiang001.com/a/CSS_DIV/20140626/2.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">理解行内元素和块级元素</a>的区别。 一个页面不要只用div，太多反而太泛滥了。table虽然用的少，但是，再做一些数据处理的时候，还是比较好用的。比如下面的，肯定用列表ul了。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/23/103611ms8tjlm7q8383583.jpg" width="326" alt="31.jpg" title="31.jpg" style="word-wrap:break-word"> 三、站在标准流的角度看padding 和 maring 、width等属性稳定性 我们知道页面布局的时候，控制盒子位置距离等，有盒子本身大小，padding和margin来做。 先看如下图，再火狐的firebug中看他们三者的显示。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/23/103611fey4r1sq2eddg31u.jpg" width="329" alt="32.jpg" title="32.jpg" style="word-wrap:break-word"> 因此，再这里我们会根据稳定性来看这三者的先后顺序： 其中稳定性最好的就是盒子本身的高度和宽度了，我们优先考虑这个。 因此，很多情况下，我们会考虑利用高度剩余法，宽度剩余法来做，而不是padding和margin。 比如下图： <img src="http://bbs.html5cn.org/data/attachment/forum/201407/23/103611760440zxizkz7wih.png" width="535" alt="33.png" title="33.png" style="word-wrap:break-word"> 这个评论和 下面的文本域框有个小距离， 此时，我们给这个评论一个h2标签，高度正好从评论上方，到文本域上的高度就好了，如图黄色部分所示。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/23/1036118278xl7pr2roz28x.png" width="535" alt="34.png" title="34.png" style="word-wrap:break-word"> h2 里面文字内容默认是靠左上对齐的，高度用不了，就剩下了，这就是高度剩余法。 其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。 四、标准流、浮动流和定位的稳定性 标准流再里面是最稳定的，就是块级元素上下显示，行内一行显示，都是最稳定的。 浮动和定位都“脱标”了，稳定性没那么稳定，所以，我们应该遵循如下原则： 页面布局，能用标准流去做的不用浮动去做，如果要用浮动做的，就不用定位去做。 五、知己知彼百战百胜 总会有特殊的浏览器，比如ie6 ，这些奇葩浏览器总是有自己独到的地方，那我们怎办？ 兵法云，知己知彼百战百胜，因此，需要我们详细的了解这些浏览器自己独特的特性，或者掌握他们<a href="http://www.xiaoqiang001.com/a/jianrongxing/20140722/13.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">IE6常常出现的bug</a>，以及对于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属性不至于引起不必要的麻烦。</td> 
 </tr> 
 </tbody> 
</table>