这个问题可以有一个相当广泛的答案，需要几天和几天的学习，但我会尝试一些简短的东西。

你必须按照一个不可见的网格来设计你的布局，就像在纸上这样在网络上，这将帮助你保持一切正确的对齐和整洁。困难在于，在网络上，尺寸和比例是可变的，内容在许多方面都是动态的（设置偏好、显示器校准、照明、显示器尺寸、浏览器、操作系统等......）。

出于这个原因，我们不考虑事物之间的比例，而让我们专注于经典设置。一个经典的布局是顶部的页眉，底部的页脚，以及中心的 3 列（左右小于中心）。这可能是两列或更多列的网站，这完全取决于您拥有多少信息，以及您想要显示多少或您想要在您拥有的信息之间放置多少“空气”（又名：空白） .

注意：请注意，当列具有不同的内容填充列时，存在一些技术 CSS 限制，例如在相同高度上对齐列（位于同一水平行上）。人们正试图 用创造性的解决方案来修复，直到浏览器将他们的 CSS 渲染更新为最新的标准

有 4 种可能的布局：

1) 固定布局：您以 px 为单位定义适合特定尺寸的每个 div，该尺寸将在浏览器中可见（例如内部：800x600）

优点：设计稳定缺点：根据用户屏幕，您可能需要很多空白空间

在这个解决方案中，您可以决定向左（知道您的右侧会有一个很大的间隙，并且您可以使用图形背景），或者对齐中心（将左侧和右侧的空白分开，减少其数量而不是左侧对齐）。

2）流畅的布局：页面会适应屏幕的大小，移动和适应周围的内容

优点：它总是会填满页面，不会留下不受控制的空白 缺点：您将失去对比例和放置内容的网格的控制（例如：一个段落在更多行上，在更高的屏幕分辨率上变成一个长的单行句子）

技术示例或另一个更复杂的示例

3）原始布局：它们基于打破布局和网格的规则。他们不使用经典的列布局，主要基于图形设计效果，例如在整个网站上显示信息，并且他们使用的绝对定位比任何其他解决方案都多。适合网络上的艺术乐趣或疯狂的作品集，仅此而已（我不反对，但他们需要了解网页设计交流的规则、技术和良好的创造性努力）。

我暂时没有找到例子，抱歉。

优点：极好的美学和原创缺点：您不能将其用于商业网站、博客或任何具有大量信息的东西。

4）动态固定布局：这是我现在用于我的个人网站以及有时间花在使网站灵活但可控的客户网站上的东西。它只不过是一个固定的布局，但有一个 javascript 会不断检查您的屏幕尺寸（在调整大小或确定它的大小的情况下）并为该尺寸传递适当的 css。因此，无论您的屏幕大小如何，您都将始终拥有良好的控制力。例如，如果我有一个 3 列布局，如果我缩小浏览器的大小，我可以决定第三列将消失并位于内容的底部，在页脚之前。

优点：完全控制 + 灵活性缺点：在设计和调试上花费大量时间来检查一切是否正常，甚至提前考虑，因为您将在以后添加新内容并且一切都必须正常工作。

我确实从中获得灵感的文章 （现在 jquery 在 resize() 方面做得很好，3 年前我有一个很长的脚本 :)）

最后一点 现在图形网页设计师（比程序员更多的图形设计师）有一个新趋势，他们使用固定布局设计他们的博客的每个页面，就像杂志和他们的文章一样。富有创意，并以自己的风格设计每篇文章。

指数是Jason Santa Maria

其他文章：

• 寻找圣杯
• css定位
• 绝对定位冲突
• 流体网格

那里有更多的文章。寻找“css 布局”。或关注有关可用性和设计的地方，例如Signal Vs Noise

所有关于组合的知识都是经验和研究，或可用性测试（试错）。将某人放在您的网站前面，看看他们对您的设计有何反应。或眼动追踪设备:)

我是自学成才的，所以我不能推荐关于作文的书籍，但是一本关于网格布局的好书可以帮助你很多。

如果你想要一个好的系统来布置网页设计，那么看看960 网格系统。这是我用于大多数布局的。我认为还有很多模板可供选择，可用于不同的软件包，例如 Photoshop 和 InDesign，以及一些可打印的模板，以满足您所有网站涂鸦的需求。

在这里也可以看到不同布局的一个很好的例子：http: //designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples