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 适合二维布局。
- 媒体查询 允许你根据设备特性应用不同的样式，移动优先 是一种设计理念，首先为移动设备设计样式，然后逐步增强为大屏幕设备的样式。