佈局說明
基本佈局屬性
Display（顯示）
display屬性設置一個元素應如何顯示。
display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
display:block – 顯示爲塊級元素
display:inline – 顯示爲內聯元素
display:inline-block – 顯示爲內聯塊元素，表現爲同行顯示並可修改寬高內外邊距等屬性
Visibility（可見）
visibility屬性指定一個元素應可見還是隱藏。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
visibility: collapse – 一般的元素的表現與 visibility: hidden 一樣，也即其會佔用空間。但如果該元素是與 table 相關的元素，例如 table row、table column、table column group、table column group 等，其表現卻跟 display: none 一樣，也即其佔用的空間會釋放。(不同瀏覽器下，對 visibility: collapse 的處理方式不同)
Position（定位）
position 屬性指定了元素的定位類型。
staticHTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。fixed固定定位元素的位置相對於瀏覽器窗口是固定位置。- Fixed定位使元素的位置與文檔流無關，因此不佔據空間。
- Fixed定位的元素和其他元素重疊。
// 右上角顯示 p.pos_fixed { position:fixed; top:30px; right:5px; }relative相對定位元素的定位是相對其正常位置。- 移動相對定位元素，但它原本所佔的空間不會改變。
// 從元素的原始左側位置減去 20 像素。（左移20px） h2.pos_left { position:relative; left:-20px; }absolute絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。- absolute 定位使元素的位置與文檔流無關，因此不佔據空間。
- absolute 定位的元素和其他元素重疊。
sticky粘性定位基於用戶的滾動位置來定位。- 粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
// Top爲0 的時候固定在那 div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
Overflow （溢出）
overflow 屬性規定當內容溢出元素框時發生的事情。
注意:overflow 屬性只工作於指定高度的塊元素上。
visible內容不會被修剪，會呈現在元素框之外。(默認值)hidden內容會被修剪，並且其餘內容是不可見的。scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。auto如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
Float（浮動）
float會使元素向左或向右移動，其周圍的元素也會重新排列。往往是用於圖像，但它在佈局時一樣非常有用。
使元素的位置與文檔流無關，因此不佔據空間。
// 圖片浮動顯示
.image-list {
float:left;
margin:5px
}
Clear (清除浮動)
clear 屬性指定元素兩側不能出現浮動元素。
元素浮動之後，周圍的元素會重新排列，爲了避免這種情況，使用 clear 屬性。
// text_line 元素左右兩邊不能出現浮動元素
.text_line
{
clear:both;
}
z-index（順序）
z-index 設置元素的堆疊順序。
可定義爲一個值(整數數字)，越大代表越置前，如可定義爲： z-index:9999。若定義爲-1，代表爲最底層。
flex佈局 & grid佈局
- flex佈局
display: flex
display: inline-flex
Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。
參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html - grid佈局
display: grid
display: inline-grid
Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。
參考:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
聖盃佈局 & 雙飛翼佈局
左右兩欄固定寬度，中間部分自適應的三欄佈局，其原理差不多，都有負邊距的應用，就是middle的實現不一樣。
關於負邊距的理解： https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html.
- 聖盃佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.header {
width: 100%;
height: 30px;
background: red;
}
.content {
overflow: hidden;
padding: 0 100px;
}
.footer {
width: 100%;
height: 30px;
background: red;
}
.middle {
position:relative;
width: 100%;
float: left;
height: 80px;
background: green;
}
.left {
position:relative;
width: 100px;
float: left;
left:-100px;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right {
position:relative;
width: 100px;
float: left;
right:-100px;
height: 80px;
margin-left: -100px;
background: pink
}
</style>
</head>
<body>
<div class="header">header-start header header header header header header-end</div>
<div class="content">
<div class="middle"> middle-start middle middle middle middle middle middle middle middle middle middle middle-end </div>
<div class="left">left-start left left left left left left left left left left left left left left left-end </div>
<div class="right"> right-start right-end</div>
</div>
<div class="footer"></div>
</body>
</html>
- 雙飛翼佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.header {
width: 100%;
height: 30px;
background: red;
}
.content {
overflow: hidden;
}
.footer {
width: 100%;
height: 30px;
background: red;
}
.middle {
width: 100%;
float: left;
}
.inner-middle{
height: 80px;
margin: 0 100px;
background: green;
}
.left {
width: 100px;
float: left;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right {
width: 100px;
float: left;
height: 80px;
margin-left: -100px;
background: pink
}
</style>
</head>
<body>
<div class="header">header-start header header header header header header-end </div>
<div class="content">
<div class="middle">
<div class="inner-middle">middle-start middle middle middle middle middle middle middle middle middle middle middle-end</div>
</div>
<div class="left">left-start left left left left left left left left left left left left left left-end </div>
<div class="right"> right-start right-end</div>
</div>
<div class="footer"></div>
</body>
</html>
