文章目錄
- 一、兩欄布局的實現
- 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>