蓝图 CSS - 使用它的高级规则答案

【问题标题】：Blueprint CSS - High level rules for using it蓝图 CSS - 使用它的高级规则
【发布时间】：2012-04-10 01:55:18
【问题描述】：

我在美国东部时间早上 8 点左右开始使用 Blueprint CSS，我发现自己有以下问题：

【问题讨论】：

【解决方案1】：

什么时候使用容器类？（+接下来的 4 个问题）：

查看源代码可以告诉您很多信息。这是容器类：

.container {width:950px;margin:0 auto;}

它只是一个大页面包装器。大多数人使用一次它来包装页面上的所有 HTML，使其居中且宽度为 950 像素。

推/拉课程有什么意义？我不能只用附加/前置定位东西吗？

追加/前置添加填充。推/拉'班次'边距。

如果我使用像 .right、.left 这样的浮点类，我还需要指定 span-x 和 last 吗？

这些 CSS 框架的全部意义在于避免处理您自己的浮点数。

如何让一行更高？

向该行添加更多内容或为其设置高度样式。

如何在一行中垂直居中？

如果坚持网格，您将使用附加/前置将其置于网格的中心。如果你不坚持网格，你会使用任何典型的 CSS 方法（通常是 margin: auto）

如何使根容器距页面左侧 20 像素而不是居中？

回到问题 #1 并查看 CSS 类。改变那个。

在大多数情况下，一旦您掌握了蓝图及其同类工具（您很快就会掌握的），它就是相当基本的工具。它的主要目的是处理将页面布局成块并为您处理所有浮动逻辑。一旦你掌握了它的窍门，你可能会发现自己不再需要一个框架，并且通常会根据需要创建自己的框架，以适应你碰巧工作的任何网站的特殊性。

【讨论】：

谢谢。所以跟进你的浮动答案。假设我想在一行的最右侧显示一些文本“欢迎用户名/注销”？好像如果我做 prepend-x，它不会，但会到最后。在这种情况下我不需要一个浮点数吗？我的蓝图备忘单说它内置了浮点类。
不要认为左右浮动。想想一个网格。每行 x 列内容。如果您想要在左侧有一个菜单，在右侧有您的登录文本，您可以这样做：menu欢迎！
现在，在特定的 span-x 中，您可能想要使用浮动，但尽可能多地使用框架网格来利用它进行页面布局。