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>
解释： ½ 默认样式是为移动设备设计的，使用单列布局。
- 当屏幕宽度大于等于 600px 时，使用双列布局，导航栏变为垂直排列。
- 当屏幕宽度大于等于 900px 时，主内容区域使用双列布局。
总结
- Flexbox 适合一维布局，Grid 适合二维布局。
- 媒体查询 允许你根据设备特性应用不同的样式，移动优先 是一种设计理念，首先为移动设备设计样式，然后逐步增强为大屏幕设备的样式。