三栏式布局--IFE2017-CSS-task03笔记

对应代码的github仓库的地址：https://github.com/AlexZhong22c/IFE-CSS-learning

task03任务要求：

调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。

改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。

这个任务中，懒于去上网找图片素材，直接引用了别人复仇者联盟的图片素材。

我们先总览本文内各种实现的思路：

按照普通顺序编写HTML系
1. 运用margin
2. 用BFC
先加载main栏的HTML系 （重点）
1. 双飞翼布局
2. 圣杯布局

按普通顺序编写HTML系

一般来说我们 按照普通顺序编写HTML ：此时先写子栏的代码，再写main栏的代码。

此时，如果想要形成三栏的布局，思路可再细分为二：

要么运用margin形成三栏的布局

demo 按照正常逻辑用margin拉开距离

要么用BFC形成三栏的布局

demo – 源码

这个其实比较巧妙。main栏的BFC令这个元素的“border-box区域”也受周围浮动元素的margin的排挤。

注：这两个demo中的clearfix类是用来闭合浮动的。以满足“父元素的高度始终为子元素中最高的高度”这个要求。

下文的各种方法也是需要闭合浮动的，为了方便演示我省略不写。

先加载main栏的HTML系

我们希望页面中间的main栏的内容最先被浏览器加载呈现，这样页面就更加主次合理，所以前端圈里面出现了这么种思路。

原理：

定义main-content宽度为100%（如果在IE6里不定义100%，会有点小问题，亲们自己可以一试）
main 左浮动，宽度为100%
sub 左浮动，宽度190，左外边距为-100%（此处是关键：浮动情况下，负的外边距会导致DIV上移，而使用-100%可以确使它移动到最左侧。)
extra 左浮动，宽度230，左外边距为-230px（道理同上，注意的是，负的左外边距值一定要大于或等于该DIV的宽度，才能靠到上一行去）

当只使用负左外边距的方法时，能够实现先加载main栏，但是main栏的内容会被挡住：

demo – 源码

因此，解决 main栏的内容被挡住的思路可再细分为二：

1.双飞翼布局

2. 圣杯布局

而在本文的最后，会介绍其他的方式来实现三栏等高的先加载main栏的三栏式布局。

双飞翼布局

淘宝的双飞翼布局：在原来的基础上多套了一层div，并且增设margin。2-1淘宝双飞翼布局demo – 源码

好处：

可以实现主要的内容先加载的优化
兼容目前所有的主流浏览器，包括IE6在内

缺点：

位置不灵活，同时css对位置的控制很强

圣杯布局

圣杯布局的特点是它使用了padding和相对定位，当然它也使用了负左外边距。2-2圣杯布局demo – 源码

好处：

可以实现主要的内容先加载的优化
位置比较灵活：毕竟它是用相对定位实现的
main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏，不会出问题。
只需要针对ie6来hack：zoom:1 ，兼容目前所有的主流浏览器，包括IE5.5

缺点：

当浏览器宽度过窄时，子栏可能会消失，extra栏的内容可能会跑到主栏里面。

证明圣杯布局内部灵活的demo – 证明圣杯布局内部灵活的源码

// 实现三栏等高的其他方法

用左右border作为两栏背景色+background-clip

.main元素的左右border区域作为两侧栏所在区域背景，实现伪等高效果；设置.main的padding实现栏间间隔。

可设置main的background色，然后用background-clip: content-box;控制背景范围。

.main {
    box-sizing: border-box;
    width: 100%;
    border-left: 190px solid #faa;/*作为左栏背景色*/
    border-right: 230px solid #aaf;/*作为右栏背景色*/
    padding: 0 10px;
    height: 400px; /*某一高度*/

	/*main栏背景：*/
    background: #afa;
    background-clip: content-box;
}

两侧栏元素再通过负margin调整到.main元素的border区域上。

缺点: 兼容性不好，用到了CSS3的属性，应该至少要ie9

绝对定位

设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果

flex布局

flex中的伸缩项目默认都拉伸为父元素的高度，可实现等高效果。通过改变伸缩项目的order，可以实现元素顺序调换的效果

缺点: 兼容性不好

参考：

详解 CSS 七种三栏布局技巧