乐鱼电竞

    • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    web前端开发培训之如何让网页布局稳定性和标准性?

    更新时间:2016年09月29日16时58分 来源:乐鱼播客 浏览次数:

    刚开始学css+div布局的同学们，都比较困惑和难写的就是兼容性的问题了，特别是ie6等低版本的浏览器，随意国内逐步慢慢消失取代，但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的，完整的，兼容性好的呢?


    因此再这里，乐鱼播客老师给大家列出网页布局标准性、合理性和兼容性的一些方法，希望对刚开始学习css的同学有所帮助。


    一、 标记的重要性。


    位 于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，我们必需在开头处使用标记为 所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。


    标记和浏览器的兼容性相关，删除，就是把如何展示HTML页面的权利交给浏览器，这 时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少中显示效果，这是不被允许的。


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


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


    一个页面不要只用div，太多反而太泛滥了。table虽然用的少，但是，再做一些数据处理的时候，还是比较好用的。


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


    我们知道页面布局的时候，控制盒子位置距离等，有盒子本身大�。琾adding和margin来做。



    因此，再这里我们会根据稳定性来看这三者的先后顺序：


    其中稳定性最好的就是盒子本身的高度和宽度了，我们优先考虑这个。 因此，很多情况下，我们会考虑利用高度剩余法，宽度剩余法来做，而不是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属性不至于引起不必要的麻烦。


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


    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】