茗梓小栈

css学习心得

2013-07-24

前言

作为初学者来说,css最难应对的还是各种浏览器兼容性问题,假如要使你的网页在ie6-9,firefox,chrome 中都呈现完美的视图,还是需要一定的努力和长时间的锻炼的。新手应付兼容性问题,可以使用适当的hack(关于hack,请自行google,这里不详述),但不要依赖hack。有这么一句话:能干的人解决问题,智慧的人绕开问题。这就是我设计css时所遵循的一个原则,避免使用hack,绕开浏览器兼容的性的敏感地带,绕开容易出错的属性,同样的效果,使用不容易出错,最简单的方法来设计。

本心得配合几个实例,希望同学们在看的时候也能实践写写,并在各个浏览器里测试。因本人水平有限,当中不免出现一些错误,不吝赐教。

个人的一些经验

  1. 左右(上下)内边距与宽度(高度)尽量(注意只是“尽量”,不是绝对)不要对一个元素同时设置,这对于以后的维护也是比较方便的。

  2. 某种设计,一般情况下,既可以使用padding,也可以使用margin,个人推荐使用padding,相比margin,由于padding添加不当导致的浏览器兼容问题比较少。但还是应该了解margin和padding使用的场合。

  3. 记住ie6几个臭名昭著的bug,比如“浮动双边距”,“3px”bug,这些bug的解决方法在网上都有。

  4. 使用css重置,虽然这个比较有争议,但是个人推荐使用,能大大减少在浏览器兼容方面调整所浪费的时间。

  5. 有些效果应该根据特定的场合来设计,比如单行文本的垂直居中,可以有以下两种方式:

    • 假如包含这个文本的元素已经设置了固定高度,那么可以为这个元素添加line-height,等于其已经设置的固定高度。
    • 假如包裹这个文本的元素没有设置固定高度,那么可以用上下的相同padding来达到垂直居中。
Fork me on GitHub