这是一道从知乎转过来的题目，希望各位大神可以帮忙。
原地址传送门
===下面是具问题===
如题，我已经掌握了HTML+CSS的基本知识，也看了很多经典的CSS书籍和网络课程，但是经常在”布局“问题上头疼。跟着例子都能做出来，但是一到实际应用就头疼，感觉千变万化，摸不着头绪。有时候会感觉很多布局方式的实现没有任何道理可言，更像是“大家试出来”的。（额外信息：我之前做过Android开发，在布局时使用的属性都是语义化的，比如居中，只需要写成“针对父元素居中”即可。与WEB开发相比，感觉上是多了一层东西，更加抽象和人性化）
与之类似的，之前我还有面临过一个问题，就是对DOM操作理解不到位。之后有人推荐了一本《Javascript DOM 编程艺术》，看完之后感觉茅塞顿开，仿佛一下子就把DOM操作学明白了！我想原因大概就是普通的入门书籍总是在讲”怎么做“，对底层的”为什么“很少提到，所以导致学习过程中会越学感觉越乱，导致无法深入。
所以我猜测，关于CSS+DIV布局方面，可能也有类似的神书存在，希望大家可以推荐。
如果没有，不知道有什么方法可以提高这方面的“理论认识”？
非常感谢。
PS：
请不要随随便便说“多练习”，我觉得在“分析问题的方法”没有学会的情况下，靠练习其实没有多大意义。就好像我说不会解微积分，不能说一句“多练习”就能解决。
布局，在于如何规划模块。就是考虑，简单说就是如果没有了这一块，或者某一块改变了，其他是否有问题。
可以看大漠的网站: http://www.w3cplus.com
感觉还是要多练习吧，可以仿写一些优秀的页面
当时我初学的时候在妙味课堂找到了这个 http://www.miaov.com/2013/miaovideo/miaovideo.html
里面有一栏是html+css布局的，有点多不过很基础很有用，要是有时间的话可以看看
你这个比方不恰当，不会解微积分，是你对微积分了解的还不够，如果已经了解了基本知识，想要提搞，就是多做练习。
你自己也说了，“已经掌握了HTML+CSS的基本知识”，所以接下来要做的还是多联习，在实际情况下碰到问题，解决问题才能不断提高，但是这也不能说你一定能设计出好看的页面
同理，photoshop 所有功能我都知道了，但我就是设计不出漂亮的东西，这里因为还牵扯到一个设计灵感和对艺术的感觉的问题，有点靠天赋了，
再美的页面，我都可以不用看他的CSS可以仿出来，但让我自己设计一个漂亮的页面出来，我也做不到，呵呵，没有艺术细胞。
多写多才踩坑
多练习，多参考，多思考，多总结
第一 要找到标准去多读文档 mdn就不错
第二 要多练 为什么题主说不能说 我不懂
你多次使用 才有学的意义啊 你不用还学什么
第三 我知道大家对layout可能害怕
不要怕 首先如bootstrap的layout要多用一下 这些都是经典解决方案 要多看 flexbox 要多学 这是一个高效方案 要学 codepen.io上有很多例子 要去看
这个网站的例子跟着敲几遍
http://zh.learnlayout.com/
winter有篇博文讲css布局，写得太好了，刚学css时我也是一头雾水，这文章看两遍就懂了，意犹未尽又看了十几遍抄写了一遍
http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html
http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
这是我以前看过的一篇文章，当时看完就对布局有了一种受益匪浅的感觉。里面会介绍一些基本的布局模板，还会举一些例子。
如果你有耐心的话，可以自己仔细看一遍。
如果没有耐心的话，总结起来就一句话，就是无论什么样的布局，都是从最简单的布局开始演化的，因此只需要记住一些最基本的布局模板，再根据需求进行更改，以不变应万变。
其实结合自己的工作经验，布局的方式只是一种手段，其实重要的还是布局本身，而且涉及的东西就多了，其实就和上面这位兄弟说的一样，现在再美的页面，我都可以模仿出来，然而如果让我自己当第一个去实现它的，我只能承认我自己做不到，因为真的是没有那种想象力和审美。如果非要找到一种提高的方法，我觉得对于普通人来说，只能是多看，多做，做练习，多反思，而且从学习方式的角度来看，我觉得一般的学习过程，本来也是先模仿再提高，之后才能达到超越的过程。
现在扁平化的 bootstrap网站到处都是，建议可以使用 UIkit前端框架。
编程没有捷径 在知识储备足够的情况下 写的多了自然也就会写了 你现在觉得自己不知道怎么应用 还是写的不够多 没事儿的时候多仿仿站
《HTML CSS网页设计与布局从入门到精通.pdf》这本书我自己感觉比较不错
还有一本《CSS禅意花园》据说很经典，还没看
正在看你推荐的《Javascript DOM 编程艺术》
就是要多写，写的多了就好了，自然而然的就熟悉了
首先，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每个属性的作用，遇到别人的妙用，就记录下来。