《精通CSS - 高级Web标准解决方案》 8. 布局

所有 CSS 布局技术的根本都是3个基本概念：**定位**、**浮动**和**外边距操纵**。

## 8.1 计划布局

布局时先做一些计划可以避免很多问题。

1. 先把页面规划为大的结构性区域，比如容器、页眉、内容区域和页脚。
2. 然后，将注意力转移到内容区域本身，开始建立网格结构。
3. 最后，在各个内容区域中寻找不同的布局结构。

结构设计完之后，可以开始关注不同类型的内容。
查看每个内容块的结构，看看不同的类型中是否有共同的模式。
找出模式并确定命名规约之后，最好马上开始定义将使用的元素。

## 8.2 设置基本结构

典型的三列博客模板。

```html
<body>
    <div class="wrapper">
        <div class="header">
            
        </div>

<div class="footer">
            
        </div>
    </div>
</body>
```

**使用外边距让设计居中**

设置主体 `div` 的宽度，并将水平外边距设置为 *auto* 。

```css
.wrapper {
    width: 920px;
    margin: 0 auto;
}
```

## 8.3 基于浮动的布局

基于浮动的布局是最容易使用的，也是最可靠的。只需设置希望定位的元素的宽度，然后将它们向左或向右浮动。

因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是浮动几乎所有东西，然后在整个文档的“战略点”（比如页脚）上进行一次或两次清理。还可以使用溢出方法清理某些元素的内容。

### 8.3.1 两列的浮动布局

```html
<div class="content">
    <div class="primary">
        
    </div>

<div class="secondary">
        
    </div>
</div>
```

为每个列设置想要的宽度，然后将次要内容向左浮动，将主要内容向右浮动。

```css
/* 将主要内容向右浮动 */
.content .primary {
    width: 650px;
    padding-right: 20px;
    float: right;
    display: inline;
}
/* 将次要内容向左浮动 */
.content .secondary {
    width: 230px;
    float: left;
    display: inline;
}
/* 清除浮动 */
.content {
    overflow: hidden;
}
```

### 8.3.2 三列的浮动布局

和两列布局唯一的差异是在内容 div 中添加了两个新的 div：一个用于主内容，一个用于次要内容。

```html
<div class="content">
    <div class="primary">
        <div class="primary">
            
        </div>
        <div class="secondary">
            
        </div>
    </div>
    <div class="secondary">
        
    </div>
</div>
```

```css
.content .primary .primary {
    width: 400px;
    float: left;
    display: inline;
}
.content .prmary .secondary {
    width: 230px;
    float: right;
    display: inline;
}
```

## 8.4 固定宽度、流式和弹性布局

上面的两个布局都是固定宽度的布局。该布局比较常见，因为开发人员可以精确的定位元素的位置。
但缺陷也很明显，因为尺寸是固定的，导致无法适配各种分辨率的屏幕。另外更改浏览器的文本字号时可能会导致页面不易阅读。

### 8.4.1 流式布局

尺寸使用百分比而不是像素来设置。

问题：在窗口较窄时，行会变的非常窄。窗口太大时，也会导致行太宽，也同样不适合阅读。

```css
/* 以整个页面宽度为基准计算出百分比 */
.wrapper {
    width: 76.8%;
    margin: 0 auto;
    text-align: left;
    /* 为了确保窗口过大或过小时页面文本也适合阅读，最好以 em 为单位设置最大和最小宽度 */
    max-width: 125em;
    min-width: 62em;
}
.content .primary {
    width: 72.82%;
    float: right;
    display: inline;
}
.content .secondary {
    width: 25%;
    float: left;
    display: inline;
}
/* 以主要内容的宽度为基准计算百分比 */
.content .primary .primary {
    width: 59.7%;
    float: left;
    display: inline;
}
.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
    display: inline;
}
```

### 8.4.2 弹性布局

弹性布局相对于字号（而不是浏览器宽度）来设置元素的宽度。以 `em` 为单位设置宽度。

问题：不能充分利用可用空间。另外字号增大时整个布局会加大，进而导致水平滚动条出现。需要在容器 `div` 上设置 *max-width* 。

将固定宽度布局转换为弹性布局是相对简单的任务。技巧是要设置基字号，让 *1em* 大致相当于 *10px* 。
大多数浏览器上的默认字号是 16px，10px 大约是 16px 的 62.5%，所以在主题上将字号设置为 62.5% 。

```css
body {
    font-size: 62.5%;
    text-align: center;
}
.wrapper {
    width: 92em;
    max-width: 95%;
    margin: 0 auto;
    text-align: left;
}
/* 内部宽度仍然使用百分比 */
.content .primary {
    width: 72.82%;
    float: right;
    display: inline;
}
.content .secondary {
    width: 25%;
    float: left;
    display: inline;
}
.content .primary .primary {
    width: 59.7%;
    float: left;
    display: inline;
}
.content .primary .secondary {
    width: 34.33%;
    padding-right: 2em;
    float: right;
    display: inline;
}
```

现代浏览器很多都已支持页面缩放了。

### 8.4.3 流式和弹性图像

使用流式或单行布局，固定宽度的图像会对设计产生强烈的影响。

对于需要跨越大区域的图像，比如站点页眉或品牌区域中的图像，可以考虑率使用背景图像而不是图片元素。

```css
#branding {
    height: 171px;
    background: url(/img/branding.png) no-repeat left top;
}
```

```html
<div id="branding"></div>
```

如果图像需要用作页面上的图像元素，需要将宽度设置为 100% 并且将 `overflow` 设置为 *hidden*。

```css
#branding {
    width: 100%;
    overflow: hidden;
}
```

```html
<div id="branding">
    <img src="/img/branding" width="1600" height="171" />
</div>
```

对于常规内容图片，你可能希望它们可以水平和垂直伸缩。

```css
.news img {
    /* 设置图片的宽度为百分比，这样就可以实现自动伸缩 */
    width: 25%;
    /* 设置最大宽度，以避免图像失真 */
    max-width: 200px;
    float: left;
    display: inline;
    padding: 2%;
}
.news p {
    width: 68%;
    float: right;
    display: inline;
    padding: 2% 2% 2% 0;
}
```

## 8.5 faux 列

每个区域由于内部元素的高度各不相同，会导致背景色没有渲染到整列。
对策是在一个占据布局最大高度的元素（比如一个容器 div）上应用重复的背景图像。

```css
#wrapper {
    background: #fff url(/img/nav-bg-fixwd.gif) repeat-y left top;
}
```

对于流式或弹性布局时，则需要多张背景图片分别按照百分比进行定位。

```css
.wrapper {
    background: #fff url(/img/secondary-faux-column.gif) repeat-y 25% 0;
}
.inner-wrapper {
    background: #fff url(/img/primary-faux-column.gif) repeat-y 72.82% 0;
}
```

## 8.6 高度相等的列

使用表格很容易实现这种效果，但是 CSS 中实现需要一点技巧。

```html
<div class="wrapper">
    <div class="box">
        <p>狩魔猎人</p>
        <p>...</p>
        <div class="bottom"></div>
    </div>
    <div class="box">
        <p>秘术师</p>
        <p>...</p>
        <div class="bottom"></div>
    </div>
    <div class="box">
        <p>圣教军</p>
        <p>...</p>
        <div class="bottom"></div>
    </div>
</div>
```

```css
.wrapper {
    width: 100%;
}
.box {
    width: 250px;
    margin-left: 20px;
    float: left;
    display: inline;
    padding: 20px;
    background: #89ac10 url(/img/top.gif) no-repeat left top;
}
```

这会产生3个高度不一致的列。

<!--
<div id="align1" class="wrapper">
    <div class="box">
        <p>狩魔猎人</p>
        <p>类似前两代的弓箭手与亚马逊。能量为憎恨与戒律，专属装备为弩枪、斗篷、箭筒。大部分技能需要远程武器才能发挥，主动技能主要以单体、群体远程物理伤害，部分元素伤害和减益伤害为主，还包括限制或伤害敌人的陷阱。<br/></p>
        <div class="bottom">Hunter</div>
    </div>
    <div class="box">
        <p>秘术师</p>
        <p>即魔法师，能量为秘能，专属装备是法珠、秘术帽、魔杖。与前代法师类似，主要伤害输出以各种元素法术为主，同时具备瞬移等法术类防护技能。<br/>
魔法师持续地激活着奥术能量 -- 一种恢复速度极快，并看似永远不会枯竭的能量。只有当她们处于危险时大量地施放多种法术时才有可能暂时导致自己能量枯竭。</p>
        <div class="bottom">Wizard</div>
    </div>
    <div class="box">
        <p>圣教军</p>
        <p>能量为神圣之怒，圣教军不靠杀死敌人来补充圣怒，他们在许多状况下可以恢复消耗的能量，像是抵挡攻击、受到严重伤害。专属装备包括圣教军盾牌、单手连枷、双手连枷。类似前代的圣骑士，圣教军的技能除了近战伤害，还包括对武器的加权祝福，对盾牌、护甲的掌握等。<br/></p>
        <div class="bottom">Crusader</div>
    </div>
</div>

这种技术的关键是给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度。

```css
.wrapper {
    width: 100%;
    overflow: hidden;
}
.box {
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 520px;
    margin-bottom: -500px;
    margin-left: 20px;
    floatL left;
    display: inline;
    background: #89ac10 url(/img/top.gif) no-repeat left top;
}
```

<!--
<div id="align2" class="wrapper">
    <div class="box">
        <p>狩魔猎人</p>
        <p>类似前两代的弓箭手与亚马逊。能量为憎恨与戒律，专属装备为弩枪、斗篷、箭筒。大部分技能需要远程武器才能发挥，主动技能主要以单体、群体远程物理伤害，部分元素伤害和减益伤害为主，还包括限制或伤害敌人的陷阱。<br/></p>
        <div class="bottom">Hunter</div>
    </div>
    <div class="box">
        <p>秘术师</p>
        <p>即魔法师，能量为秘能，专属装备是法珠、秘术帽、魔杖。与前代法师类似，主要伤害输出以各种元素法术为主，同时具备瞬移等法术类防护技能。<br/>
魔法师持续地激活着奥术能量 -- 一种恢复速度极快，并看似永远不会枯竭的能量。只有当她们处于危险时大量地施放多种法术时才有可能暂时导致自己能量枯竭。</p>
        <div class="bottom">Wizard</div>
    </div>
    <div class="box">
        <p>圣教军</p>
        <p>能量为神圣之怒，圣教军不靠杀死敌人来补充圣怒，他们在许多状况下可以恢复消耗的能量，像是抵挡攻击、受到严重伤害。专属装备包括圣教军盾牌、单手连枷、双手连枷。类似前代的圣骑士，圣教军的技能除了近战伤害，还包括对武器的加权祝福，对盾牌、护甲的掌握等。<br/></p>
        <div class="bottom">Crusader</div>
    </div>
</div>

为了把列的底边定位在正确的位置，需要让它们与容器元素的底部对齐。
为此，首先把容器的 `position` 设置为 *relative*。然后把 *bottom* 的 `position` 设置为 *absolute*，把它们的 *bottom* 属性设置为 0。

```css
.wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 290px;
    background: url(/img/bottom.gif) #89ac10 bottom left no-repeat;
    margin-left: -20px;
}
```

<!--
<div id="align3" class="wrapper">
    <div class="box">
        <p>狩魔猎人</p>
        <p>类似前两代的弓箭手与亚马逊。能量为憎恨与戒律，专属装备为弩枪、斗篷、箭筒。大部分技能需要远程武器才能发挥，主动技能主要以单体、群体远程物理伤害，部分元素伤害和减益伤害为主，还包括限制或伤害敌人的陷阱。<br/></p>
        <div class="bottom">Hunter</div>
    </div>
    <div class="box">
        <p>秘术师</p>
        <p>即魔法师，能量为秘能，专属装备是法珠、秘术帽、魔杖。与前代法师类似，主要伤害输出以各种元素法术为主，同时具备瞬移等法术类防护技能。<br/>
魔法师持续地激活着奥术能量 -- 一种恢复速度极快，并看似永远不会枯竭的能量。只有当她们处于危险时大量地施放多种法术时才有可能暂时导致自己能量枯竭。</p>
        <div class="bottom">Wizard</div>
    </div>
    <div class="box">
        <p>圣教军</p>
        <p>能量为神圣之怒，圣教军不靠杀死敌人来补充圣怒，他们在许多状况下可以恢复消耗的能量，像是抵挡攻击、受到严重伤害。专属装备包括圣教军盾牌、单手连枷、双手连枷。类似前代的圣骑士，圣教军的技能除了近战伤害，还包括对武器的加权祝福，对盾牌、护甲的掌握等。<br/></p>
        <div class="bottom">Crusader</div>
    </div>
</div>

## 8.7 CSS 3 列

CSS 3 也可以创建等高文本列，这要通过 `column-count` 、 `column-width` 和 `column-gap` 属性实现。

```html
<p>狩魔猎人</p>
<div class="col">
    <p>...</p>
</div>
```

```css
.col {
    -moz-column-count: 3;
    -moz-column-width: 14em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-count: 3;
    -webkit-column-width: 14em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #ccc;
    column-count: 3;
    column-width: 14em;
    column-gap: 2em;
    column-rule: 1px solid #ccc;
}
```

<!--
<div id="align4" class="wrapper">
    <p>狩魔猎人</p>
    <div class="col">
        <p>类似前两代的弓箭手与亚马逊。能量为憎恨与戒律，专属装备为弩枪、斗篷、箭筒。大部分技能需要远程武器才能发挥，主动技能主要以单体、群体远程物理伤害，部分元素伤害和减益伤害为主，还包括限制或伤害敌人的陷阱。<br/>
猎魔人发射的每只箭矢都会将她们的愤怒倾注进敌人的身体里，在她们的正义之怒下，她们的攻击里充满着仇恨，冷酷，对敌人从不留情。她们的仇恨之火是无法被熄灭的，憎恨值恢复速度极快，即便是休息时，猎魔人也会充满复仇的怒火。<br/>
但凡期待能做出真正的成就的猎魔人都会用另外一种能量源来控制自己的仇恨：戒律值，用来确认和保证自己可以再活下去进行明天的猎杀的根本。<br/>
戒律值对猎魔人来说十分珍贵。不但是因为恢复缓慢，因为比起她们满是怒火还需求更多的思考和耐心，而且每一项防御技能都要消耗戒律值 - 给敌人放陷阱，跳跃躲避爪牙的攻击，以及闪避尖刺和箭矢陷阱。</p>
    </div>
</div>

## 8.8 CSS 框架与 CSS 系统

**CSS 框架** 的目标是简化 CSS 的使用，帮助用户方便地创建各种常用的布局，而不需要编辑底层的 CSS。如 YUI Griids、Blueprint 和 960 等。
但其也有缺点，会改变编写标记的方式，破坏变现和意义的分离；要求在设计中必须使用特定的网格结构。

**CSS 系统** 实际上是一个工具箱，其中包含可重用的样式和标记模式，可以用它开发站点专用的框架。
工具箱可以包含全局 reset、排版样式和表单处理，以及登录表单、日历表格和导航列表等常用 HTML 组件的标记模式。然后再开发作为定制框架使用的系统。

## 附1. 引用

1. 《精通 CSS - 高级 Web 标准解决方案（第2版）》 - Andy Budd, Simon Collison, Cameron Moll 著；陈剑瓯 译。

---

本书后面还有3章，分别讲了 bug 的发现与修复方法 和 两个作者写的示例及其用到的一些未来可能会实装的CSS特性（由于这本书买的比较早，现在看来常用的浏览器都已经支持这些新的特性了）。
这里就不再继续写了。有兴趣的同学可以买书看一下。

**9. bug 和 修复 bug**
**10. 实例研究：Roma Italia**
**11. 实例研究：Climb the Mountains**

← 上一篇

《精通CSS - 高级Web标准解决方案》 8. 布局

目录

关联博客