理解『布局』

温故知新

在 layout.jade 中，你会看到类似如下的代码:

div.part_container.part_1_container: div.part_1
    div.caption
        span.title:b Hello World

我们在最开始介绍 Jade 语法 的时候，也提到过，为了减少 过多的缩进层级，增加一个 : 的逻辑，这是 FirstWeb 特殊的语法。如上代码，实际上也相当于:

div.part_container.part_1_container
    div.part_1
        div.caption
            span.title
                b Hello World

注意: 为了让 HTML 结构在 CSS 样式上有足够的调整空间，示例中 DOM 元素的修饰性包裹，用到比较多。

接近万能的布局方法

如上图所示，我们接下来要尝试实现的布局。当能够理解它，也就能应对大多数布局相关的情况了。

一、先构建布局的框架

1、先确定 HTML 的结构

div.container
    div.left_container: div.left
    div.right_container: div.right
    div.clear

.left 外包裹一层 .left_container，同样处理的还有 .right 与 .right_container ，那么 .container 下的直属 DOM 元素 .left_container & .right_container 可以 float: left，再按照比例分派 width 就实现左栏+右栏的布局了。
真正实体元素是 .left & .right，其上 padding、border等样式修饰时，也不会影响外部 width 的布局。

注意: 这里使用 container这个词，如果在其它地方看到 wrap，都是同样道理，只是用词习惯不同，自己喜好；同样，实际完成页面时，在个人偏好的前提下，也要取有意义的名字(比如 .friend_links_container)，尽可能避免出现类似 .container 这种泛指性的关键词。当然，真这么做了，其实也没有关系，只要自己明白这是一个问题就好。

2、使用 CSS 完成样式上的布局

.container{
    .left_container{
        float: left; width: 60%;
        .left{
            border: 1px solid #eee;
            margin-right: 30px; }
    }
    .right_container{
        float: left; width: 40%; }
}

如上样式代码所示，外部包裹 left_container 做法的最大好处，就是多个 DOM 元素各司其职，.left_container 负责 width+float，而 .left 则可以处理 border、margin 等逻辑。
同样需要注意的是，如果实际情况，尽可能不要像 Demo 里，使用 .left 这种泛指的关键词，而是要语义更明确的，自己一看就知道对应到哪个地方的。

3、从左到右再从上到下的次序

layout.jade 中 left body (左栏中间) 再分割成 left body 1、left body 2、left body3 的时候，也是水平方向使用 float: left 实现。

基本上，布局在代码上实现的时候，遵循从左到右再从上到下的视觉次序。
至于 从上到下 就不另外说明了，因为它是自然的，跟代码里的次序一样，一般不需要特别处理就自动实现了。

二、局部细节布局 (绝对位置)

在 left body 1 中，也分为头、中、尾三个部分，其中头部、尾部分别有两个元素，都是采用 position: absolute 进行布局的。

使用 绝对位置 布局的时候，一般是以下步骤:

锚定父元素，相当于给一个参照的目标，就是父元素给一个 position 的属性，比如 relative
设定当前元素的坐标，比如下面示例代码中 left:0; top:0
设定当前元素的尺寸，比如 width: 100%; height:100%
然后就是针对当前元素的各个子元素 进行位置的排布
如有必要，设定 z-index 这个属性，值是任意的整数，元素处于重叠时，数值越大的在越上面

比如这是 left body 1 中外部容器的初始属性的 CSS 代码:

// left body 1 的 CSS 样式
.part_1_container{
    position: relative;
    .part_1{
        position: absolute;
        left: 0; top: 0;
        height: 100%; width: 100%;
    }
}

使用 绝对位置 进行布局的时候，需要注意几点:

要有一个参照的父元素，其 position 为 fixed、absolute、relative 其中一种 (在 layout.scss 中有相应注释，可以试试去除父元素上的 position 属性，布局会变成如何)。
position: absolute 的元素，一般要同时定义水平、垂直两个方向的坐标，比如 left+top、left+bottom、right+top、right+bottom。
position: absolute 的元素如果不指定高度、宽度，那么它将是没有宽度、高度的。

一些技巧

好像也并没有特别的技巧，CSS 在具体实践上，是调(整) 的技术，一点点磨出来，熟能生巧。

我们应该对『一页简历』中，resume.scss 内将 .timelines 随意改成 .timelines_tmp 还有印象，或者也可以回过头再去试一次，找找感觉。CSS 便是如此，可以一层一层，也可以一点一点堆叠起来的，花时间下去，总是能达到最终的设计效果。

如果说一定有技巧的话，布局除了 float、width、clear 的使用外，细节上就是 margin、padding、border 了，当然还有坐标相关的 position、left、top、right、bottom，有些时候布局(不是 float 导致的)挤破掉时候需要 overflow:hidden，也可能需要进行一次 reset: margin:0; padding:0。

多试几次，就都明白了。
如果布局过程中遇到了问题，可以将自己想要 Debug 的元素，设定一个非常明显的背景色，当然，最重要的是要学会借助浏览器自带的 Debug 引擎(Inspect、审查元素)，去找到问题的原因，并解决它。