最近在修复一个模块的样式问题，这让我想起了大概十年前刚入行的时候。我最开始学的是 Java，捎带着学了些前端知识，要说做个很漂亮的网页，可能做不出来，但是一些简单的样式还是可以写的。可有一次，遇到一个样式怎么调也调不好，这里调好了，那里乱了，那里调好了，这里又乱了。没有一个系统的方案，看起来是头痛医头，脚痛医脚，所以总也调不好。H 算是一个新人吧，我看他的样式也是同样的问题。他说这个样式在他的屏幕上是好的，换一个不同分辨率的屏幕又乱了，总也修不好。我看了他的代码，仿佛看到了我十年前的样子。其实样式问题很简单，擅长其他语言的程序员（比如 Java 程序员）常常觉得 CSS 是没有逻辑的语言，甚至不算一门语言。确实，它不算一门严格意义上的计算机语言，它没有基本的判断、循环等结构，但要说它没有逻辑，那我不能苟同。我总结了，所有样式乱的问题（不是这里乱就是那里乱），根本的就在于布局没做好，布局就是 CSS 的逻辑 。CSS 看起来很简单，好像人人都能写，但一上手就会写的，往往写的是微调，只知其一不知其二。而熟练的人会先写布局，然后才是微调。举个例子，下面这个汽车仪表盘，实现起来要怎么做：按照 H 的做法，把最外面的容器设置为相对定位，里面的内容全都是绝对定位，看起来很简单是不是。可是，一个像素一个像素地调整 top、left 等，换一个分辨率的屏幕能不乱嘛。其实人家的图片是有逻辑的，布局就是逻辑，设计师在设计的时候每个元素位置也不是随便放的，看下面的示意图：整个仪表盘可以分为上中下三个部分，每个部分里面横向的又可以分为几个部分，所有的元素都可以用方块抽象出来。为什么是方块，因为方块最容易填满整个平面、最容易对齐，这就是设计的美感、整齐感。在前端设计里，方块就是 div。上中下三个部分就是三个竖直排列的 div，这个采用浏览器默认的“流式布局”即可，里面横向的方块可以采用“弹性布局”，所以这幅图用了两个布局，里面的元素再用微调来设置具体的样式。其实再仔细看，中间汽车的部分又可以分为上下，下面的又是横向的方块。这就是布局之中还有布局，好像把雪花放大一样，里面的结构和外面的一样。一直放大，一直有布局，直到没法用布局解决了，这时候就是具体的元素，此时才用微调，而不是上来就用微调。不懂布局就不能说懂 CSS，就不能大言不惭地说 CSS 没有逻辑。关于布局，我建议看看 MDN 的文档：相信看完后，你就不会再说 CSS 没有逻辑了。
You must log in to post a comment.