眼见不一定为实,别相信你的眼睛

0.jpeg


写在前面

春节看完了《三打白骨精》,然后今天在群里突然看到有朋友在问一个导航中,每块内容之间的间隔线怎么处理比较好。

0.png

于是想到了《三打白骨精》里的一句台词,是孙悟空在离开唐僧回花果山的路上,被观音拦截后,观音所说的。


你看见的是真相,而唐僧看见的是心相。


然后再回头想想,在我们写 CSS 的时候,有时候看到设计稿的表现效果,其实并不是我第一反应中出现应该要去写的,只是最后我们会把页面的表现效果还原了而已,本质上却有所不同……


正文开始

都说眼见为实,但在我们写 CSS 的时候,我一直就觉得,我们所看到的界面并不是我们真正所要理解的东西。为什么这么说呢,就好比我们在导航区域看到的一条竖线,类似 | 这样的,那么这个会真的只是一条线么。


虽然表面我们看到的的确是线,但事实上,我们在写 CSS 的时候,可能会用到方案大概会有这么几种:


  • 键盘上的那个叫管道符的字符,就是这个 字符,我们可以用这个字符设置字体大小和颜色;

  • 利用 border-left 或者 border-right 的话,这个的确就是边框线了;

  • 利用 background 这个背景的话,我们又可以分成 background-color 或者 background-image 来实现;


基本上主要的方式可能会通过上面这三种,这里提到的只是简单的一条纯色的线条而已。


那么,为什么我要扯这个东西呢。其实我想就只是想说,当我们拿到设计稿要开始制作页面的时候,还是要去考虑一下我们应该用什么方式来实现比较妥当,会不会涉及到一些扩展性之类的东西。


还是以上面这个 竖线间隔为例,如果我们在设计稿上看到一个导航中有这个东西,首先会想到什么,是边框,对吗?我不知道各位想到的跟我想到的是不是一样,反正我想到的是边框。于是就利用 border 属性来做,结果发现,一个元素的 border 属性会根据盒模型的高度而改变,那么这个时候就有可能会小小滴头疼一下,因为这个竖线的高度可能只有10px左右,比一个12px的汉字还小,怎么办呢。当然,解决方法肯定是有的,只不过这个时候,或许我们可以考虑直接用一张背景图会更轻松。


但,玩 CSS 的朋友肯定都知道,CSS 是一个灵活的东西,根据 HTML 结构我们可以得到很多意想不到的效果;也有朋友可能会有代码洁癖,不想看到过多为了修饰性而存在的 HTML 标签;诸如此类的考虑点似乎可以说出好几个,但最终会怎么做呢,其实我也不知道,因为上面说的几种方法我都尝试过。


反正我不会用 border 边框的方式来玩,相对来说,我会比较喜欢用 background-image 背景图片的方式来做,这么一张小小的图片,增加不了多少字节,适当合理的处理一下图片,还是可以接受的,甚至也可以把多张图片合并在一起啊。


写在最后

写完后,发现这篇真的很水,相对还是比较符合“闲扯”……


题图本来打算用《三打白骨精》中的剧照图,不过无意间在百度图片中看到这张好像是来自《万万没想到》系列中的图片,觉得挺好玩的,就用了这张。


PS:首发在个人的公众号(talk-css)……