如何有效提高使用CSS+DIV进行布局的能力?

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

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

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

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

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

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

阅读 10k
14 个回答

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

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

首先,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每个属性的作用,遇到别人的妙用,就记录下来。

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

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

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

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

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

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

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

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

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

《HTML CSS网页设计与布局从入门到精通.pdf》这本书我自己感觉比较不错
还有一本《CSS禅意花园》据说很经典,还没看
正在看你推荐的《Javascript DOM 编程艺术》

感觉还是要多练习吧,可以仿写一些优秀的页面
当时我初学的时候在妙味课堂找到了这个 http://www.miaov.com/2013/miaovideo/miaovideo.html
里面有一栏是html+css布局的,有点多不过很基础很有用,要是有时间的话可以看看

多写多才踩坑

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏