CSS3 基础布局技术与响应式设计

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>

解释： ½ 默认样式是为移动设备设计的，使用单列布局。