Blueprint CSS - 使用它的高级规则

时间:2011-04-13 13:44:02

标签: css blueprint-css

我今天早上8点左右开始使用Blueprint CSS,我发现自己有以下问题:

  1. 我什么时候使用容器类?

  2. 我应该如何从概念上考虑容器?

  3. 容器类需要span类吗?为什么或为什么不呢?

  4. 容器类需要最后一堂课吗?为什么或为什么不呢?

  5. 容器可以放在另一个容器内吗?

  6. 推/拉类有什么意义?我不能只用append / prepend来定位东西吗?

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

  8. 如何让一排更高?

  9. 如何将某些内容垂直居中?

  10. 如何让根容器距离页面左侧20px而不是让它居中?

1 个答案:

答案 0 :(得分:7)

  

我何时使用容器类? (+接下来的4个问题):

查看源代码可以显示很多内容。这是容器类:

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

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

  

推/拉类有什么意义?我不能只用append / prepend来定位东西吗?

append / prepend添加填充。推/拉“移位”边距。

  

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

这些CSS框架的重点是避免处理自己的浮动。

  

如何让一排更高?

在行中添加更多内容或为其添加高度样式。

  

如何将某些内容垂直对齐?

如果坚持网格,你可以使用append / prepend将其居中在网格上。如果你没有坚持网格,你会使用任何典型的CSS方法(通常是margin:auto)

  

如何让根容器距离页面左侧20px而不是让它居中?

一直回到问题#1并查看CSS类。改变这一点。

在大多数情况下,Blueprint及其类似的工具是相当基本的工具,一旦你掌握它(你将在一段时间内)。它的主要目的是处理将页面布局为块并处理所有浮动逻辑。一旦你掌握了它,你可能会发现自己不再需要一个框架了,并且通常会根据需要掀起你自己的框架,以适应你碰巧正在做的任何网站的特殊性。