網頁布局匯總

1. 盒模型

容器大小 = 內容大小 + 內邊距(padding)? + 邊框大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型</title><style>.container {width: 100px;height: 100px;border: 10px solid skyblue;padding: 1px;margin: 2px;/*-sizing: border-box;*/}</style>
</head>
<body><div class="container">css盒模型</div>
</body>
</html>

?在 css 中加入下列代碼，盒子便不會被撐大。

?box-sizing: border-box;

box-sizing 有三個值：content-box(默認)、border-box、inherit 。其中inherit表示box-sizing的值應該從父元素繼承。content-box和border-box的主要區別就是盒子的width和height的值包不包括border、padding這兩個屬性的值。

content-box: 也叫標準盒模型，默認是該值。不包含 border 和 padding 大小。如果盒子寬度為 100 px, padding 為 10px , border 寬度為 5 px。那么盒子大小是 100 + 10 * 2 + 5 * 2 = 130 px

border-box：也叫 IE 盒子模型。盒子大小包含 content(內容大小) + padding(內邊距) + border 邊框大小。如果盒子寬度為 100， padding 為 10 px， border 寬度為 5px。那么盒子大小為 100px

2.? 流式布局(fluid布局)

流式布局就像是在容器中裝水，容器有多寬，水就有多寬。在網頁中，顯示器有多大像素，內容就覆蓋到哪。流式布局是為了解決固定像素的缺點而誕生的。流式布局是一種等比例的縮放式的布局方式。在css 代碼中用百分比來設置寬度，所以也稱百分比自適應布局。流式布局實現方式是將css固定像素寬度轉換成百分比寬度。

換算公式：目標元素寬度/父盒子寬度=百分數寬度

?流式布局的缺點：流式布局是解決不同設備分辨率的兼容性問題，如果兩個設備差異太大，都會導致頁面變形。因為字體和高度是采用固定像素的，而寬度是采用百分比的，字體和高度不會兼容。

2.1 響應式導航欄案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流式布局</title><style>.container {overflow: hidden;background-color: black;}a {float: left;display: block;padding: 10px;color: #fff;font-size: 16px;text-decoration: none;}/* @media mediaType 連接符 (mediaFeature) {  CSS 樣式規則  }mediaType ： all（不寫默認all,所有設備） \ screen (手機、平板、電腦)\ print(打印機)連接符： and or onlymediaFeature：媒體特性，width、height、min-width、max-width、device-width、orientation 等。*/@media screen and (max-width: 600px) {a {float: none;width: 30%;}}</style>
</head>
<body><div class="container"><a href="">首頁</a><a href="">我的信息</a><a href="">我的訂單</a><a href="">聯系我們</a></div>
</body>
</html>

3. 彈性布局(flexbox布局)

flexbox 彈性布局打破常規的浮動布局，實現垂直等高，水平均分，按比例劃分等布局方式以及如何處理可用的空間，該布局可以創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局。

彈性布局盒子由伸縮容器和伸縮子元素組成，通過設置元素的display屬性為flex（塊狀元素）或者inline-flex（內聯元素），便可以將一個盒子指定為伸縮盒子。每一個伸縮容器內都有兩根軸:主軸和交叉軸，兩軸之間相互垂直，值得一提的是水平的不一定就是主軸。每根軸都有起點和終點，伸縮盒子內能定義多個伸縮子元素，伸縮子元素沿著主軸排列。設為flex布局以后，子元素的float、clear和vertical-align屬性將失效。伸縮子元素也可通過設置display:flex指定成伸縮盒子，也就是伸縮盒子可以嵌套。

3.1 父容器屬性

1. flex-direction 屬性

flex-direction 屬性指定伸縮盒子中主軸的方向。

參數：

row：默認主軸的水平方向，從左向右排列

row-reverse：與 row 排列相仿，從右向左排列

column：從上到下排列

column-reverse：從下到上排列

2. flex-wrap 屬性

flex-wrap 屬性指定子元素超過夫容器是否換行

參數：

nowrap：子元素不換行（默認值）

wrap：子元素換行，換行部分在子元素下面

wrap-reverse：子元素換行，換行部分在子元素上面

3. flex-flow 屬性

flex-flow 是個簡寫屬性，同時設置 flex-direction 和 flex-wrap 屬性。更加方便地控制彈性盒模型（Flexbox）中的項目排列方向和換行方式。

參數：

flex-flow: flex-direction屬性值? flex-wrap屬性值

?案例：有一個容器，我們希望其中的項目水平排列，并且當空間不足時允許項目換行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex彈性布局</title><style>.container {display: flex;flex-flow: row wrap;  /* 水平排列，換行 */}.item {width: 20%;}</style>
</head>
<body><div class="container"><div class="item">項目 1</div><div class="item">項目 2</div><div class="item">項目 3</div><div class="item">項目 4</div><div class="item">項目 5</div><div class="item">項目 6</div></div>
</body>
</html>

4. justify-content 屬性

justify-content屬性決定了子元素在主軸上的對齊方式
參數：

flex-start：子元素在主軸方向的開始位置向結束位置排列（默認值）

flex-end：子元素在主軸方向的結束位置向開始位置排列

center：子元素在主軸的中間排列

space-between：子元素平均分布在主軸上，第一個元素左邊和最后一個元素右邊無間隔

space-around：子元素平均分布在主軸上，每個元素左右兩邊都有間隔。

5. align-items 屬性

align-items 屬性定義了子元素在交叉軸上的排列方式

參數：

flex-start：子元素在交叉軸方向的開始位置向結束位置排列（默認值）

flex-end：子元素在交叉軸方向的結束位置向開始位置排列

center：子元素在交叉軸的中間排列

baseline: 子元素第一行文字的基線對齊

stretch: 子元素未設置高度，子元素高度將填充整個容器高度（默認）

6. align-content 屬性

align-content 屬性定義了多根軸線的對齊方式，若只有一根軸線將不起作用。

參數：

flex-start: 交叉軸的起點位置對齊

flex-end: 交叉軸的終點對齊

center：交叉軸中央對齊

space-between: 與交叉軸平均分布，第一個元素上邊和最后一個元素下邊無間隔

space-around: 與交叉軸平均分布，第一個元素上邊和最后一個元素下邊有間隔

stretch：子元素未設置高度，子元素高度將填充整個容器高度（默認）

3.2 子容器屬性

1. order 屬性

order 定義子容器排列順序，默認 0，數值越小優先級越高，排在越前

2.?flex-grow屬性

flex-grow 屬性設置擴展比率。默認值 0，表示不占用父容器剩余空間。該值不帶單位。

案例1：當父容器的寬度大于子容器所有寬度之和時，父容器有剩余空間，當設置子元素的 flex-grow 為 0 時，表示不占用父容器的剩余空間。當設置某個子元素的 flex-grow：1時，其余子元素不設置，表示父容器剩余空間都給設置了 flex-grow：1 的元素。

案例2：當父容器的寬度大于子容器所有寬度之和時，父容器有剩余空間，當設置子元素1的 flex-grow 為 2?時，設置某個子元素2的 flex-grow：1 時，其余子元素不設置，表示父容器剩余空間給子元素1和子元素2按比例分配。此時，子元素1的容器大小 = 本身子元素大小 + 剩余父容器大小 * (2/3)，子元素2的容器大小 = 本身子元素大小 +?剩余父容器大小 * (1/3)

3. flex-shrink 屬性?

flex-shrink 屬性設置收縮比率。默認值 1，不帶單位。當父元素容器寬度小于子容器所有之和時，所有子元素按照定義的收縮比例收縮。

4. flex-basis 屬性?

定義主軸多余空間，默認是 auto, 及子容器本身大小。可以設置像素值，如 250px，表示該子元素占據固定空間。當同時設置了width和flex-basis屬性時，width屬性無效。

5. align-self 屬性?

允許單個子元素與其它子元素不一樣對齊方式。可覆蓋 align-items 屬性。默認值為 auto ，表示繼承父元素的 aling-items 屬性。如果沒有父元素，等同于 stretch。

參數：

auto

flex-start

flex-end

center

baseline：子元素第一行文字的基線對齊

stretch：子元素未設置高度，子元素高度將填充整個容器高度

6. flex 屬性?

flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

3.3 基于彈性布局的響應式導航欄

<!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;justify-content: space-around;background-color: black;}.item {color: #fff;font-size: 16px;padding: 14px 20px;text-decoration: none;}@media (max-width: 600px) {.container {flex-direction: column;  /**從上到下排列*/}.item {text-align: center;margin-bottom: 10px;}}</style>
</head>
<body><div class="container"><a href="" class="item">首頁</a><a href="" class="item">我的信息</a><a href="" class="item">我的訂單</a><a href="" class="item">聯系我們</a></div>
</body> 
</html>

?

當屏幕像素小于 600px 時，導航欄縱向排列?

4. 網格布局(Grid 布局)

網格布局（Grid）是將網頁劃分成一個個網格單元，可任意組合不同的網格，輕松實現各種布局效果，也是目前CSS中最強大布局方案。通過設置 display: grid 或 inline-grid（設成行內元素）將容器設置為網格容器，容器內的子元素為網格元素，也稱item （項目）。

值得一提是，設為網格布局以后，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align等設置都將失效。

行和列

容器里面的水平區域稱為 "行"（row），垂直區域稱為 "列"（column）。

網格線

網格線(grid line)就是劃分網格的線。水平網格線區分行，垂直網格線區分列。

單元格

行和列交叉區域被稱為單元格(cell) , m行n列的網格線會有 mn 個單元格。

4.1 網格容器屬性

1. grid-template-rows?和 grid-template-columns

這兩個屬性用于定義網格的行和列。我們可以使用像素、百分比或 fr 單位來指定它們的尺寸。

 .container {display: grid;width: 300px;grid-template-columns: 50px 100px 50px;grid-template-rows: 50px 100px 50px;background-color: #ccc;
}

2. grid-column-gap 和 grid-row-gap

這兩個屬性用于設置行和列之間的間隙。

3. justify-items 和 align-items

這兩個屬性用于調整網格項在容器中的水平和垂直對齊方式。

4. grid-template-areas

這個屬性允許我們為網格區域命名，從而更容易地控制網格項的位置。

5. repeat() 函數

網格非常多，需要為每個網格設置寬高，非常麻煩。

repeat(arg1, arg2) 。arg1 表示行或列的數量。arg2 表示網格的大小。

.container {display: grid;grid-template-columns: repeat(2, 40px 60px 80px);grid-template-rows: repeat(2,50%);background-color: #ccc;
}

6. fr 單位

為了方便表示比例關系，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。

.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 2fr 1fr;background-color: #ccc;
}

第二列的寬度為固定的100px，第三列的寬度是第一列的2倍。

.container {display: grid;width: 300px;grid-template-columns: 1fr 100px 2fr;background-color: #ccc;}

7.?minmax()?

該函數產生一個長度范圍，表示長度就在這個范圍之中。它接受兩個參數，分別為最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代碼表示第三列寬度不小于100px, 不大于 1fr

8. auto?

自適應

.container {width: 300pxdisplay: grid;grid-template-columns: 50px auto 50px;
}

9. auto-fill、auto-fit
aut-fill 和 auto-fit 自適應與自填充，一般用來實現自適應布局的。

.container {display: grid;grid-template-columns: repeat(auto-fill, 100px);
}

5. 圣杯布局

圣杯布局是三列布局，我們需要一個容器?wrapper?包裹所有的內容，并包含?middle?(中間內容區域),?left?(左側欄), 和?right?(右側欄) 三個主要區域。注意 HTML 結構中必須將?middle?放在最前面，以便優先加載。中間寬度自適應，兩邊定寬，主要是采用浮動 + 定位實現圣杯布局。

?將主要內容、左邊、右邊都設置位左浮動，并且設置主要內容部分寬度100%，左右兩邊定寬。

    /*  通用樣式 */body {margin: 0;padding: 0;}.wrapper {overflow: hidden; /* 清除浮動，并解決margin塌陷 */}.content {float: left;width: 100%; /* 占據父容器全部寬度 */}.left {float: left;width: 200px;}.right {float: left;width: 200px;}/*  為了方便查看效果 */.content {background-color: #eee;padding: 20px;height: 200px;box-sizing: border-box; /* 包含 padding 和 border */}.left, .right {background-color: #ddd;height: 200px;padding: 20px;box-sizing: border-box;}

?上面css樣式設置后效果如下，可以看到中間內容部分獨占一行。

?接下來需要把最外層的父容器(wrapper) 部分設置設置左右邊距，放置左右側盒子騰出空間。

?將左右兩邊的盒子定位到預留的位置中

左邊部分：負?margin-left?的百分比值是相對于父元素的寬度計算的，這里將左側欄拉到最左側。

右邊部分：負?margin-left?的固定值，將右側欄拉到中間內容區域的右側。

6. 雙飛翼布局

雙飛翼布局是另一種經典的網頁布局方式，與圣杯布局類似，同樣實現了左右兩側固定寬度，中間內容區域自適應的三欄布局。雙飛翼布局和圣杯布局的核心思想是一樣的：讓中間內容區域優先加載，并且保證三欄居中對齊。它們的不同之處在于實現的方式，雙飛翼布局使用?margin 負值和 padding?來實現。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>雙飛翼布局</title><style>* {margin: 0;padding: 0;}.wrapper {width: 100%; /* 容器設置為100%*/}.middle {float: left;width: 100%;background-color: darkkhaki;}/* 這就是與 圣杯布局最大的差別，這里需要在中間容器額外內嵌一個塊級元素，設置外邊距為左右兩邊占位*/.content {margin: 0 200px; /* 左右margin，為側邊欄預留空間 */}.left {float: left;width: 200px;margin-left: -100%;}.right {float: left;width: 200px;margin-left: -200px;}/* 為了方便查看效果 */.content {background-color: #eee;padding: 20px;height: 200px;box-sizing: border-box; /* 包含 padding 和 border */}.left, .right {background-color: #ddd;height: 200px;padding: 20px;box-sizing: border-box;} </style>
</head>
<body><div class="wrapper"><div class="middle"><div class="content">中間</div></div><div class="left">左邊</div><div class="right">右邊</div></div>
</body>
</html>