前置知識
內外邊距
-
內邊距(
padding)： padding是元素邊框與其內容之間的空間。也就是說，如果你給一個元素設置了內邊距，這個空間會作為元素內容與元素邊框之間的緩沖區域。設置內邊距會使元素本身變大。例如padding:10px就創建了10像素的空間，使元素的內容與邊框之間有了10像素的距離。 -
外邊距(
margin)： margin則是元素與相鄰元素之間的空間。與內邊距不同，外邊距不會使元素本身變大，但會使元素與其周圍的其他元素有更大的距離。例如，margin:10px在元素與其旁邊元素之間創建了10像素的空間。
在CSS中，你可以控制元素的頂部、底部、左側和右側的內外邊距。例如：
.example {margin-top: 10px; /* 設置外邊距 */margin-bottom: 20px; margin-left: 30px;margin-right: 40px;padding-top: 50px; /* 設置內邊距 */padding-bottom: 60px;padding-left: 70px;padding-right: 80px;
}
另外，要注意的一點是，水平方向的margin可以重疊，也就是說，兩個垂直相鄰元素之間的margin取的是兩者之間較大的一個，不是兩者的加和。對于垂直方向的padding則沒有這個特性。
浮動與定位
- 浮動(
float)：float屬性被用來讓一個元素沿著其容器的左或右邊緣，盡可能地向上浮動。同時，讓文本和內聯元素環繞它。是為了實現文字環繞圖片的效果而誕生的。
我們可以給一個元素設置float:left; 或 float:right;來控制這個元素浮動的方向。要注意，浮動會使元素脫離文檔的普通流，所以可能會影響布局。
例如，在父元素中，如果所有的子元素都設為浮動，則父元素的高度就會變為0。可以通過設置父元素的overflow屬性或者清除浮動來解決這個問題。
- 定位(
position)：position屬性通過與top，bottom，left，right屬性配合使用，允許你精確地控制一個元素的位置。其常見的值有以下幾種：
-
static：元素在文檔流中的默認位置。 -
relative：元素的位置相對于其在文檔流中的位置。 -
absolute：元素的位置相對于最近的已定位父元素（一個父元素的position屬性不為static），如果元素沒有已定位的父元素，那么它的位置相對于最初的包含塊。 -
fixed：元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。
對于定位元素，通過設置top, right, bottom和left四個屬性，可以決定這個元素距離定位參考點的距離。例如，top: 10px;表示元素距離上邊界(或者最近的一個定位祖先元素的上邊界)10像素遠。
z-index層疊等級屬性
z-index 是 CSS 屬性，用于指定一個元素在三維Z軸上的位置。這對于控制重疊的元素的視覺順序非常有用。
z-index 只有在元素被賦予了一個不是 static 的位置屬性（即，position 的值為 relative、absolute、fixed 或 sticky）時才生效。
數字可以是正、負或零。元素的 z-index 值越高，它就越在其它元素之上。如果兩個并列元素的 z-index 值相等，則根據它們在 HTML 中的順序來決定哪一個在上面；后來的元素會覆蓋先前的元素。
比如：
element1 {position: absolute;z-index: 1; /* 此元素將位于其它元素之下 */
}element2 {position: absolute;z-index: 3; /* 此元素將位于其他元素之上 */
}
在上述的例子中，element 2 會出現在 element 1 的上方，因為它的 z-index 值更大。
不過，z-index 也有其復雜性，比如在使用嵌套元素時，z-index 只能影響其父級上下文中的層級。在有些情況下，高層級的元素會出現在低層級的項下，這種情況常常出現在有不同層疊上下文的元素交互時。所以在實際使用時需要注意這些細節。
三欄布局頁面
因為代碼中的.header、.main 和 .bottom 所在的位置都是 .one 的直接子元素，因此它們會默認垂直排布，因此就不需要加入position屬性。
在main區域中的三個區域也同理，只需要添加float來確認排列方向就好。
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三欄布局</title><style>html body {margin: 0;padding: 0;background-color: antiquewhite;}.one {/* 設定總區域大小 */width: 600px;height: 400px;/* 定位 */position: absolute;margin: 20px 25%;background-color: rgba(0,0,0,0.4);}.one>* {margin: 0;padding: 0;}.header {/* 大小 */width: 100%;/* 設定邊框和背景顏色，美觀 */border: 0px solid #000;background-color: white;/* 文字居中 */text-align: center;line-height: 40px;}/* 編寫代碼使文字居中 */.main>* {text-align: center;line-height: 320px;}.main {width: 100%;height: 80%;float: left;}.left {height: 100%;width: 15%;background-color: rgba(0,0,0,0.5);float: left;}.middle {height: 100%;width: 70%;float: left;}.right {height: 100%;width: 15%;background-color: rgba(0,0,0,0.5);float: left;}.bottom {/* 添加這一行代碼，來消除main區域的浮動影響，不然bottom區域會被擠到下方 */clear: both;width: 100%;height: 10%;background-color: white;/* 文字居中 */text-align: center;line-height: 40px;}</style>
</head>
<body><div class="one"><div class="header"><span>頭部區域</span></div><div class="main"><div class="left"><span>左側邊欄</span></div><div class="middle"><span>內容區域</span></div><div class="right"><span>右側邊欄</span></div></div><div class="bottom"><span>底部區域</span></div></div>
</body>
</html>
實現效果：
筆記：
- 基于父元素而定位，所以一般position都是absolute。
- 內外邊距都是基于父元素的寬度計算的，即margin-top：10%；計算的是寬度的10%而不是高度。
