使用CSS Reset让网页布局变得轻松

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

其实作为网页前端设计人员最大的痛苦莫过于各种各样的浏览器,不过浏览器外壳(Shell)还好,糟糕的事情是有各种牌子的浏览器排版内核(Core),这或多或少给我们网页布局带来一定的麻烦,比如说不同的浏览器对于盒子模型的理解偏差。

好吧,我们完全没有比较把大量的时间花费在兼容浏览器上面,而且做到100%的全兼容会有一定的困难,对于CSS不太熟练的设计人员来说,与其耗费大量时间调试写CSS Hack,然后制造出一个极难维护且占带宽的样式文件,还不如将时间节省下来去喝杯咖啡,喝咖啡?开玩笑,那些在不同浏览器下呈现的乱七八糟的布局难道就不管了吗?当然不是这样,其实我们可以借助于CSS Reset(也称CSS重置、CSS重设、CSS清零)。

什么是CSS Reset?简单的来说它主要实现不同浏览器下不同布局模式的统一,这样将大大有利于我们布局跨浏览器的网页。

最经典的CSS Reset莫过于下面这一句了:

1
2
3
4
* {
  margin: 0;
  padding: 0
}

什么?你也是这么写的?好吧,我以前也一直这么写,但是现在我觉得应该淘汰这种写法了,为什么呢?除了少部分浏览器不支持*通配符外,这种写法带来了另外一个问题《* { margin: 0; padding: 0; } No Longer Cool》这篇文章介绍了性能上面有影响,总之我们还是换一种方法吧:-)

现成的CSS Reset有很多,其中《CSS Tools: Reset CSS》比较不错,其将所有可能的标签列出来然后Reset样式,从而取代了* { margin: 0; padding: 0; }的写法,另外对于不支持HTML5的标签的老式浏览器,其还将这些HTML5块级(Block)标签重置为display:block。这个CSS Reset的使用方法也非常简单,只要在你写CSS时引用一下这个Reset样式就可以了。

想了解更多的关于CSS Reset的故事,可以参观淘宝UED的《Reset CSS研究(八卦篇)》

想了解不同CSS Reset的表现,我相信* { CSS:resetr }这个网站还是值得参考的。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注