其实我平时做CSS的东西较少了,主要工作是在做创意方面的事情,但是也经常有CSS学习者在QQ或MSN上问我一些问题,但很多问题呢,总是很重复.有时候,一个图片显示不了,一个东西长度或宽度不够,和想象中不一样,大家就着急了..但是从我的角度出发去看待这些着急的问题的时候..我觉得主要是解题思路问题:
首先我反对利用一些高级技巧,高级技巧太偏门,而且不好理解.当然,CSS中也没有啥太高级的技巧,所以所有编写方式都很简单,如果一个东西位置或样式不对,我觉得我们没必要死磕在正确的位置上,而是应该找原因所在.我最常用的方法,就是使用border:1px solid #000fff;这样一句话,这句话让我当前这个DIV有1px的蓝色边框,有了蓝色边框,我就知道这个DIV的位置,大小等信息,那么我就能进一步知道这个元素与预想中的位置或大小有多少差异.而且有时候我会截屏,用photoshop去量一下实际误差,那么知道误差了,我就再去找误差的原因,比如我把上一层DIV也加上边框,去看看与上一层的关系,看是不是由于上一层引起来,逐层向上推进,总能找到一个东西,阻碍了我的CSS实现.那么对于平级的DIV也是一样的,也是用这个方法,基本上是手工加边框再加上分析,慢慢推导出一个问题,举个例子:
某背景图片,在IE中正常,而在FF中不正常,那么我用Border:1px solid #000fff;加亮这个显示背景的DIV,结果发现,在IE中,这个DIV是个大框.而在FF中,这个DIV高度只有5px,难怪.原来DIV不够高,自然背景显示不了..这和FF或FF支不支持背景没关系.而大多数人一直在问自己,为什么没有背景,其实不是没背景,而是没有高度.问题出来了..如何把这个DIV拉高?绝对定位?绝对高度?还是在DIV下面塞一个clear:both的小方块?都行,这就是CSS问题的解决思路.
那么试着把这个问题解决…高度不够,看上去像是没撑开,OK,在这个DIV封闭的地方/div的地方加个数字,比如123,结果发现.DIV撑开了..原来下面没有实体,所以没撑开..OK,继续,我想保持这个状态,但又不想显示数字123..怎办?123换成空格,嗯.没问题,那么空格有高度,怎办?DIV不是可以overflow:hidden吗,就这样,我把空格放进一个div中,这个DIV高度为0,空格也不显示了..而且这个DIV帮助我们把这个DIV撑开了..
This entry was written by , posted on September 4, 2007 at 9:19 am, filed under Front End. Bookmark the permalink. Follow any comments here with the RSS feed for this post.