兩欄布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- flex實現 --><div style="display: flex;height:100%"><div style="background-color: red;width:100px;%">1</div><div style="background-color: blue;flex:1 0 0">2</div></div><!-- grid實現 --><div style="display: grid;width:100vw;grid-template-columns:200px auto"><div style="background-color: green;">1</div><div style="background-color: black;">2</div></div>f <!-- float實現 --><div><div style="float: left;background-color:chocolate;width:100px">1</div><!-- margin-left使得內容不會占據左側高度 --><div style="background-color: yellow;margin-left:100px">2</div></div>
</body>
</html>
三欄布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div style="display: flex;"><div style="background: red;width:100px">1</div><div style="flex:1;background: yellow;">2</div><div style="width:100px;background: blue;">3</div></div><div style="display: grid;grid-template-columns:100px 1fr 100px"><div style="background:green">1</div><div style="background:black">2</div><div style="background:red"> 3</div></div><div style="margin-top: 100px;"><div style="background:green;float:left;width:100px">1</div><div style="background:red;float:right;width:100px"> 3</div><!-- 中間一欄必須放到最后 --><!-- 如何放到中間，會導致float:right換行 --><div style="background:yellow;margin-left:100px;margin-right:100px">2</div></div>
</body></html>
圣杯布局
圣杯布局要求
- header和footer各自占領屏幕所有寬度，高度固定。
- 中間的container是一個三欄布局。三欄布局兩側寬度固定不變，中間部分自動填充整個區域。
- 中間部分的高度是三欄中最高的區域的高度。
- 中間部分最先渲染
因為中間部分最先渲染，就需要把中間部分寫在html中左右前面
左側的欄目偏移量等于 right偏移自身元素+margin-left：-100%(父元素的大小)
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯布局</title></head><body><style>#header {width: 100vw;background-color: red;}#middle {padding: 0 100px;overflow: hidden;}.column {float: left;}#center {background-color: pink;width: 100%;}#left {background-color: blue;margin-left: -100%;position: relative;width: 100px;right: 100px}#right {background-color: green;margin-right: -100px;width: 100px;}#footer {width: 100vw;background-color: yellow;}</style><div id="header">header</div><div id="middle"><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body></html>
對于margin左右兩邊設置負責可以參考以下
可以看到，設置 margin-right 負值后，橙色方塊 自身不動，但其右邊的灰色方塊 向左偏移
#container{display: flex; }#left{margin-right: -20px; }
| 設置負值的現象 | |
|---|---|
| margin-left | 自身向左移動 |
| margin-top | 自身向上移動 |
| margin-right | 自身不動，其右邊元素向左移動 |
| margin-bottom | 自身不動，其下方元素向上移動 |
雙飛翼布局
- 中間的container是一個三欄布局。
- 三欄布局兩側寬度固定不變，中間部分自動填充整個區域。
- 中間部分的高度是三欄中最高的區域的高度。
- 中間部分的背景包括左右兩邊
- 中間部分的內容最先渲染
所以和三欄布局的最大不同就是中間部分要在最前面
大體實現和圣杯布局差不多，主要就是使用padding限制中間盒子的內容，圣杯布局使用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>
</head><body><div><div style="background:blue;float: left;width:100%"><!-- div的content會被覆蓋掉 --><div style="padding: 0 100px;">main</div></div><!-- 整個元素偏移 --><div style="width:100px;float:left;background:red;margin-left:-100%">22222</div><div style="float: left;background:yellow;width:100px;margin-left:-100px">3</div></div>
</body></html>
css三角形
CSS繪制三角形主要用到的是border屬性，也就是邊框。
平時在給盒子設置邊框時，往往都設置很窄，就可能誤以為邊框是由矩形組成的。實際上，border屬性是右三角形組成的，下面看一個例子：
div {width: 0;height: 0;border: 100px solid;border-color: orange blue red green;
}
將元素的長寬都設置為0，顯示出來的效果是這樣的： 
所以可以根據border這個特性來繪制三角形：
div { width: 0; height: 0; border-left: 50px solid red; border-top: 50px solid transparent; //透明border-bottom: 50px solid transparent;//透明
}
為什么需要 border-top 和 border-bottom？
- 形成三角形的斜邊：
- 當你設置了
border-left為有顏色（比如紅色）的邊框時，它會成為三角形的一個直角邊。 - 通過設置 **透明的
border-top**和border-bottom，這兩個透明的邊框會讓整個元素看起來像是一個“尖銳的頂端”，從而形成一個三角形的外觀。
- 當你設置了
- 保持元素的比例：
- 如果只有
border-left而沒有上下透明的邊框，元素本身不會有高度，只有邊框的顏色會顯示出來。沒有透明的上下邊框，紅色的左邊框會被壓縮或拉伸，無法形成一個完整的三角形形狀。
- 如果只有
錄制影像)
