1. CSS3 基礎與布局技術
1.1 Flexbox 布局
Flexbox 是一種一維布局模型，適合用于在一個方向上（行或列）排列元素。
基本概念：
- 容器（Container）：應用?
display: flex;?的元素。 - 項目（Item）：容器內的子元素。
常用屬性：
-
容器屬性：
display: flex;：將容器設置為 Flexbox 布局。flex-direction: row | row-reverse | column | column-reverse;：定義主軸方向。justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：定義項目在主軸上的對齊方式。align-items: flex-start | flex-end | center | baseline | stretch;：定義項目在交叉軸上的對齊方式。flex-wrap: nowrap | wrap | wrap-reverse;：定義項目是否換行。
-
項目屬性：
flex: <grow> <shrink> <basis>;：定義項目的伸縮性。align-self: auto | flex-start | flex-end | center | baseline | stretch;：定義單個項目在交叉軸上的對齊方式。
示例代碼：
<div class="flex-container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
.flex-container {display: flex;justify-content: space-between;align-items: center;height: 200px;background-color: #f4f4f4;
}.item {background-color: #ccc;padding: 20px;margin: 5px;
}
解釋：
.flex-container?是 Flexbox 容器，display: flex;?啟用了 Flexbox 布局。justify-content: space-between;?讓項目在主軸上均勻分布，兩端對齊。align-items: center;?讓項目在交叉軸上居中對齊。
1.2 Grid 布局
Grid 是一種二維布局模型，適合用于在行和列兩個方向上進行布局。
基本概念：
- 容器（Container）：應用?
display: grid;?的元素。 - 項目（Item）：容器內的子元素。
常用屬性：
-
容器屬性：
display: grid;：將容器設置為 Grid 布局。grid-template-columns: <track-size> ...;：定義列的大小。grid-template-rows: <track-size> ...;：定義行的大小。gap: <row-gap> <column-gap>;：定義行和列之間的間隙。justify-items: start | end | center | stretch;：定義項目在單元格內的水平對齊方式。align-items: start | end | center | stretch;：定義項目在單元格內的垂直對齊方式。
-
項目屬性：
grid-column: <start> / <end>;：定義項目占據的列。grid-row: <start> / <end>;：定義項目占據的行。justify-self: start | end | center | stretch;：定義單個項目在單元格內的水平對齊方式。align-self: start | end | center | stretch;：定義單個項目在單元格內的垂直對齊方式。
示例代碼：
<div class="grid-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>
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 100px);gap: 10px;background-color: #f4f4f4;
}.item {background-color: #ccc;padding: 20px;text-align: center;
}
解釋：
.grid-container?是 Grid 容器，display: grid;?啟用了 Grid 布局。grid-template-columns: repeat(3, 1fr);?定義了三列，每列的寬度相等。grid-template-rows: repeat(2, 100px);?定義了兩行，每行的高度為 100px。gap: 10px;?定義了行和列之間的間隙為 10px。
2. 響應式設計
2.1 媒體查詢（Media Queries）
媒體查詢允許你根據設備的特性（如屏幕寬度、高度等）應用不同的樣式。
基本語法：
@media (條件) {/* 滿足條件時應用的樣式 */
}
常用條件：
max-width：最大寬度。min-width：最小寬度。orientation: portrait | landscape;：設備方向。
示例代碼：
/* 默認樣式 */
body {background-color: lightblue;
}/* 當屏幕寬度小于等于 600px 時應用的樣式 */
@media (max-width: 600px) {body {background-color: lightcoral;}
}/* 當屏幕寬度大于 600px 且小于等于 900px 時應用的樣式 */
@media (min-width: 601px) and (max-width: 900px) {body {background-color: lightgreen;}
}
解釋：
max-width: 600px;?當屏幕寬度小于等于 600px 時，背景顏色變為?lightcoral。min-width: 601px?和?max-width: 900px?當屏幕寬度在 601px 到 900px 之間時，背景顏色變為?lightgreen。
2.2 移動優先（Mobile First）
移動優先是一種設計理念，首先為移動設備設計樣式，然后通過媒體查詢逐步增強為大屏幕設備的樣式。
示例代碼：
/* 移動設備樣式 */
body {background-color: lightblue;font-size: 14px;
}/* 平板設備樣式 */
@media (min-width: 600px) {body {font-size: 16px;}
}/* 桌面設備樣式 */
@media (min-width: 900px) {body {font-size: 18px;}
}
解釋：
- 默認樣式是為移動設備設計的，背景顏色為?
lightblue，字體大小為?14px。 - 當屏幕寬度大于等于 600px 時，字體大小變為?
16px。 - 當屏幕寬度大于等于 900px 時，字體大小變為?
18px。
3. 綜合示例
以下是一個結合 Flexbox、Grid 和響應式設計的綜合示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Layout</title><style>/* 移動設備樣式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}.container {display: grid;grid-template-columns: 1fr;gap: 10px;padding: 10px;}.header, .footer {background-color: #333;color: white;text-align: center;padding: 10px;}.nav {display: flex;justify-content: space-around;background-color: #444;padding: 10px;}.nav a {color: white;text-decoration: none;}.main {background-color: white;padding: 10px;}/* 平板設備樣式 */@media (min-width: 600px) {.container {grid-template-columns: 1fr 3fr;}.nav {flex-direction: column;justify-content: flex-start;}.nav a {margin: 5px 0;}}/* 桌面設備樣式 */@media (min-width: 900px) {.container {grid-template-columns: 1fr 3fr;}.main {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}}</style>
</head>
<body><div class="container"><header class="header"><h1>Header</h1></header><nav class="nav"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a></nav><main class="main"><section><h2>Section 1</h2><p>Content of section 1.</p></section><section><h2>Section 2</h2><p>Content of section 2.</p></section></main><footer class="footer"><p>Footer</p></footer></div>
</body>
</html>
解釋： ? 默認樣式是為移動設備設計的，使用單列布局。
- 當屏幕寬度大于等于 600px 時，使用雙列布局，導航欄變為垂直排列。
- 當屏幕寬度大于等于 900px 時，主內容區域使用雙列布局。
總結
- Flexbox?適合一維布局，Grid?適合二維布局。
- 媒體查詢?允許你根據設備特性應用不同的樣式，移動優先?是一種設計理念，首先為移動設備設計樣式，然后逐步增強為大屏幕設備的樣式。
?
![C++基礎 [八] - list的使用與模擬實現](http://pic.xiahunao.cn/C++基礎 [八] - list的使用與模擬實現)
)
下)
