三栏布局学习笔记

谁借莪１个温暖的怀抱￠ 2022-06-05 05:12 268阅读 0赞

# 三栏布局总结 #

三栏布局一般指的是左右侧固定宽度，中间自适应宽度的布局。

首先想到的是最简单的也最容易实现的绝对定位布局。

## 绝对定位布局 ##

基本思路：左右侧使用绝对定位固定，中间元素使用margin和两侧隔开距离。其实和之前的两列布局的思路是基本上一样的。都是使用脱离文档流配合上margin实现的。那么为什么这里不能使用float来脱离文档流实现呢。这是因为如果中间栏不浮动，左右栏浮动，那么浮动的两栏和中间栏是不能到同一行的。原因就要扯到浮动的原理上了。那么如果中间栏也浮动呢，这样中间栏就会被压缩，达不到自适应的目的，所以想要通过脱离文档流配合margin来简单实现三栏布局，就只能使用绝对定位了。

![三栏布局01][01]

.left { width: 200px; height: 300px; background-color: #0c0; position: absolute; top: 8px; left: 10px; }
            .right { width: 200px; height: 300px; background-color: #0c7; position: absolute; top: 8px; right: 10px; }
            .main { height: 300px; background-color: #cc0; margin-left: 210px; margin-right: 210px; }

## 浮动配合margin负值布局 ##

上面也分析过，直接使用浮动是不可行的，那么我们稍微改造一下。如果三栏都浮动宽度会被压缩，那么我们在中间栏外面再套上一层宽度为100%，然后再使用margin隔开不就可以了。这样分析下来，会发现整个三栏布局分成了两层，一层是中间栏，另外一层是左右栏覆盖在中间栏的左右两侧。

![三栏布局02][02]

<div class="main">
            <div class="mainbody">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>

.left { width: 200px; height: 300px; background-color: #0c0; float: left; margin-left: -100%; }
            .right { width: 200px; height: 300px; background-color: #0c7; float: left; margin-left: -200px; }
            .main { height: 300px; background-color: #ccc; width: 100%; float: left; }
            .mainbody { margin-left: 210px; margin-right: 210px; background-color: #cc0; height: 300px; }

思路清楚了，实现起来的难点，主要是如何把左右两侧栏放到正确的位置上。我们知道浮动元素会跟在上一个浮动元素的边界后面，那么只需要改变该元素对于边界的判断，就可以成功的改变他的位置了。而改变元素对于边界的判断，也就是改变盒模型的边界，所以改变margin的值就可以轻松地做到。如果想要元素处在相对靠前的位置，只需要把margin设置为负值就可以了。

## 使用flex布局 ##

这个使用起来是最简单最方便的，虽然兼容性上可能不太好，但是大家都慢慢的开始不考虑低版本IE的兼容性了呢。只需要把左右栏的宽度设置好，然后修改中间栏的flex-grow让他自动填充剩余的区域就好了。

![三栏布局03][03]

body { display: flex; background-color: #ccc; }
            .left { order: -1; width: 200px; height: 300px; background-color: #0c0; }
            .right { width: 200px; height: 300px; background-color: #c0c; }
            .main { flex: 1; margin-left: 10px; margin-right: 10px; height: 300px; background-color: #cc0; }

在HTML中，为了让中间栏的主要内容优先加载，都是把中间栏放在最前面的，所以在这里需要使用order调整内容的显示顺序。

## 三栏布局中等高的实现 ##

在三栏布局中，有时会需要这三栏的高度相同，即以最高的元素为准，其他元素高度和它相同。想要实现这种结构，可以通过padding的补充以及margin的负值来实现。

这是没有实现等高时的效果：

![这里写图片描述][SouthEast]

使用padding将元素撑开到一个极大值，然后使用margin的负值把元素的边界拉回来，最后在父元素上添加overflow：hidden隐藏掉超出的部分。

实现等高后的效果：

![这里写图片描述][SouthEast 1]

原理：由于使用padding把元素撑开了，所以子元素中的背景会存在于下面很长的一段距离(padding的值)，但是我们需要的仅仅是自适应高度也就是把高度调整为子元素中的最大的值而不是一个很大的值，所以还需要把元素的边界拉回来。所以使用margin的负值把元素的边界拉了回来。这时元素的边界其实和原本是没有差别的。只是背景扩张了出去而已。因此我们还需要在父元素中设置overflow为hidden来隐藏超出去的元素。

## 总结 ##

三栏的布局肯定不止这些，小生不才..目前只掌握了这些，如果以后学到了新的布局方法还会回来更新。如有错误，欢迎指正！

[01]: /images/20220605/67362ff6a0db43afb1a30300f93e0fee.png
[02]: /images/20220605/d9d984a2041f490b977ad4367aa87a5e.png
[03]: /images/20220605/f6f2efec556b476ca21fc30b1f758d0c.png
[SouthEast]: /images/20220605/98aec092b75c40a885b75c1af376d018.png
[SouthEast 1]: /images/20220605/ff1bfb0d99ea40e986aeab2bb1aaa0ec.png