javascript - 如何有效提高使用CSS+DIV进行布局的能力?
PHP中文网
PHP中文网 2017-04-11 09:46:40
0
14
995

这是一道从知乎转过来的题目,希望各位大神可以帮忙。
原地址传送门

===下面是具问题===

如题,我已经掌握了HTML+CSS的基本知识,也看了很多经典的CSS书籍和网络课程,但是经常在”布局“问题上头疼。跟着例子都能做出来,但是一到实际应用就头疼,感觉千变万化,摸不着头绪。有时候会感觉很多布局方式的实现没有任何道理可言,更像是“大家试出来”的。(额外信息:我之前做过Android开发,在布局时使用的属性都是语义化的,比如居中,只需要写成“针对父元素居中”即可。与WEB开发相比,感觉上是多了一层东西,更加抽象和人性化)

与之类似的,之前我还有面临过一个问题,就是对DOM操作理解不到位。之后有人推荐了一本《Javascript DOM 编程艺术》,看完之后感觉茅塞顿开,仿佛一下子就把DOM操作学明白了!我想原因大概就是普通的入门书籍总是在讲”怎么做“,对底层的”为什么“很少提到,所以导致学习过程中会越学感觉越乱,导致无法深入。

所以我猜测,关于CSS+p布局方面,可能也有类似的神书存在,希望大家可以推荐。
如果没有,不知道有什么方法可以提高这方面的“理论认识”?
非常感谢。

PS:
请不要随随便便说“多练习”,我觉得在“分析问题的方法”没有学会的情况下,靠练习其实没有多大意义。就好像我说不会解微积分,不能说一句“多练习”就能解决。

PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답(14)
小葫芦

你这个比方不恰当,不会解微积分,是你对微积分了解的还不够,如果已经了解了基本知识,想要提搞,就是多做练习。
你自己也说了,“已经掌握了HTML+CSS的基本知识”,所以接下来要做的还是多联习,在实际情况下碰到问题,解决问题才能不断提高,但是这也不能说你一定能设计出好看的页面
同理,photoshop 所有功能我都知道了,但我就是设计不出漂亮的东西,这里因为还牵扯到一个设计灵感和对艺术的感觉的问题,有点靠天赋了,
再美的页面,我都可以不用看他的CSS可以仿出来,但让我自己设计一个漂亮的页面出来,我也做不到,呵呵,没有艺术细胞。

左手右手慢动作

多练习,多参考,多思考,多总结

Ty80

现在扁平化的 bootstrap网站到处都是,建议可以使用 UIkit前端框架。

刘奇

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

这是我以前看过的一篇文章,当时看完就对布局有了一种受益匪浅的感觉。里面会介绍一些基本的布局模板,还会举一些例子。

如果你有耐心的话,可以自己仔细看一遍。
如果没有耐心的话,总结起来就一句话,就是无论什么样的布局,都是从最简单的布局开始演化的,因此只需要记住一些最基本的布局模板,再根据需求进行更改,以不变应万变。

其实结合自己的工作经验,布局的方式只是一种手段,其实重要的还是布局本身,而且涉及的东西就多了,其实就和上面这位兄弟说的一样,现在再美的页面,我都可以模仿出来,然而如果让我自己当第一个去实现它的,我只能承认我自己做不到,因为真的是没有那种想象力和审美。如果非要找到一种提高的方法,我觉得对于普通人来说,只能是多看,多做,做练习,多反思,而且从学习方式的角度来看,我觉得一般的学习过程,本来也是先模仿再提高,之后才能达到超越的过程。

Ty80

首先,css本身是不具备逻辑的(现在最新的css规范开始有一些类似于calc这样的属性实现一些简单逻辑,但总的来说仍然不具备强逻辑),所以有人使用less、sass、stylus之类的东西让css写起来更有逻辑,但也只是为了写的更快更少,最终编译出来的东西还是没有逻辑的css。

没有逻辑的东西,想要写的“好”,就只能依靠规范来约束,依靠经验来升华。

所以我们看到有bootstrap、semantic、pure等等无数css框架(这里只讨论这些框架的css部分),它们提供了规范。在这些规范下,你可以快速的“布局”,大到全站响应式的栅格系统,小到一个button、一个icon。
如果上来就使用这些css框架,之后有一天一个项目完全由自己写css,可能会觉得一些本来一个class搞定的东西,自己怎么都写不出来,或者写了几百行之后发现各种冲突来了,改头不改尾,一团浆糊。
这种情况就是规范写法解决的问题,如果想自己提高这方面的能力,可以读一遍这些框架一些常用的布局是如何实现的,想想哪些东西值得复用,选择器使用时的取舍等等很多内容。

除了规范的写法之外,自己写css有时候还会遇到这样的问题。我想这么这么布局,自己试了半天实现不来,把症结一搜索,试了两三条结果中的方法,其中一个解决了问题,但是自己并不理解到底是怎么解决的。
这就是经验带来的升华,前人依靠css中一些你不知道的属性,实现了你想要的效果。那么说明你对于css中的属性还有不清楚的角落;也说明你想把这些经验变成自己的,至少得把这条经验彻底弄懂。

不论是规范还是经验,都是可以有条理的学习的。
规范你可以看看bootstrap的css规范、pure的规范和airbnb的css规范等等,它们可能互相矛盾,但至少都能保证在内部运行良好。
经验就是一条条看css每个属性的作用,遇到别人的妙用,就记录下来。

黄舟

第一 要找到标准去多读文档 mdn就不错
第二 要多练 为什么题主说不能说 我不懂
你多次使用 才有学的意义啊 你不用还学什么
第三 我知道大家对layout可能害怕
不要怕 首先如bootstrap的layout要多用一下 这些都是经典解决方案 要多看 flexbox 要多学 这是一个高效方案 要学 codepen.io上有很多例子 要去看

迷茫

布局,在于如何规划模块。就是考虑,简单说就是如果没有了这一块,或者某一块改变了,其他是否有问题。

洪涛

就是要多写,写的多了就好了,自然而然的就熟悉了

Peter_Zhu

编程没有捷径 在知识储备足够的情况下 写的多了自然也就会写了 你现在觉得自己不知道怎么应用 还是写的不够多 没事儿的时候多仿仿站

左手右手慢动作

可以看大漠的网站: http://www.w3cplus.com

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿