CSS 两栏布局和三栏布局的实现

文章目录

- 一、两栏布局的实现
- - 1. float+margin
  - 2. flaot+BFC
  - 3. 定位+margin
  - 4. flex 布局
  - 5. grid布局
- 二、三栏布局的实现
- - 1. float + margin
  - 2. float + BFC
  - 3. 定位 + margin(或者定位+BFC)
  - 4. flex布局
  - 5. 圣杯布局
  - 6. 双飞翼布局

一、两栏布局的实现

两栏布局其实就是左侧定宽，右侧自适应的布局

1. float+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

2. flaot+BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

知识课堂
先来看两个相关的概念:
●Box: Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。
●Formatting context: 块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲: BFC是一 -个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件:
●根元素: body;
●元素设置浮动: float除none以外的值;
●元素设置绝对定位: position (absolute、 fixed);
●display值为: inline-block、 table-cell、 table-caption、 flex等 ;
●overflow值为: hidden、 auto、 scroll;

BFC的特点:
●垂直方向上，自.上而下排列，和文档流的排列方式-致。
●在BFC中上下相邻的两个容器的margin会重叠
●计算BFC的高度时，需要计算浮动元素的高度
●BFC区域不会与浮动的容器发生重叠
●BFC是独立的容器，容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触

3. 定位+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.left {position: absolute;left: 0;width: 100px;height: 300px;background: red;}.right {margin-left: 100px;height: 300px;background: green;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

4. flex 布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

5. grid布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-columns: 100px 1fr;box-sizing: border-box;height: 300px;}.left {background: red;}.right {background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

二、三栏布局的实现

左右定宽，中间自适应

1. float + margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

2. float + BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;overflow: hidden;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

注意：上面两种方法都必须先渲染right,否则right会被middle挤下来

3. 定位 + margin(或者定位+BFC)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局3</title><style type="text/css">.container {position: relative;}.left {width: 200px;height: 300px;background-color: #dc698a;position: absolute;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 300px;background-color: #3eacdd;}</style></head><body><div class="container"><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></div></body>
</html>

4. flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {height: 300px;display: flex;}.left,.right {width: 100px;background: red;}.center {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

5. 圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.container {height: 200px;overflow: hidden;padding: 0 200px;}.center {width: 100%;height: 200px;background-color: green;float: left;}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;position: relative;right: -200px;}</style></head><body><div class="container"><div class="center"></div><div class="left"></div><div class="right"></div></div></body>
</html>