CSS

CSS

Yiuhang Chan
  2018-11-24 17:16:34 2018-11-24 17:16:34 创建   2024-03-06 19:13:08 2024-03-06 19:13:08 更新      7.1k 字  27 分钟  

什么是CSS

CSS代表“层叠样式表”（Cascading Style Sheets）。它是一种用于控制网页布局和设计的技术，允许网页开发者和设计师为HTML（超文本标记语言）元素指定字体、颜色、间距、布局以及各种视觉效果。CSS可以提高网页的表现力，使其更加丰富和吸引人，同时也可以使内容与表现分离，从而简化网页的维护和更新。

通过使用CSS，开发者可以为不同的设备（如桌面显示器、手机、打印机等）创建特定的样式，以确保网页在各种浏览环境中都能以最佳方式呈现。CSS的“层叠”特性允许多个样式表按照一定的优先级顺序应用于同一个HTML文档，这意味着可以根据需要轻松地覆盖和修改样式。

CSS的使用不仅提升了网页的美观性和可用性，还有助于提高网页的加载速度和搜索引擎优化（SEO）。因为它允许开发者将结构（HTML）与设计（CSS）分离，从而使HTML代码更加简洁和清晰，更易于搜索引擎理解。随着Web技术的发展，CSS也在不断进化，CSS3是最新的版本，引入了更多的布局选项、动画和其他视觉效果。

为什么使用CSS

使用CSS（层叠样式表）的原因非常多样，它改变了网页开发和设计的方式。以下是使用CSS的一些主要原因：

  1. 分离内容与样式：CSS允许开发者将网页的设计样式与内容分离。这意味着可以独立修改HTML文档的结构和CSS样式表的设计，而无需重写整个页面，从而提高了网站的维护效率和灵活性。

  2. 节省时间和资源：通过使用CSS，可以在多个网页中重复使用同一样式表。当需要更改网站的设计时，只需修改一个CSS文件，网站上的所有页面都会自动更新，这大大节省了时间和资源。

  3. 提高页面加载速度：将样式信息保存在外部样式表中可以减少每个页面的HTML代码量。因为样式表只需要在首次访问网站时加载一次，然后就可以被缓存起来用于后续页面，这样可以减少数据传输量，加快页面加载速度。

  4. 增强网页的可访问性：CSS提供了更多的布局和设计选项，可以创建更易于阅读和导航的网页布局。这对于包括视觉障碍人士在内的所有用户都非常重要。

  5. 提升网站的兼容性：通过使用CSS，可以针对不同的浏览器、设备和屏幕尺寸创建特定的样式。这意味着无论用户使用什么设备访问网站，都可以提供最佳的浏览体验。

  6. 支持高级用户界面和动画：CSS3引入了许多新特性，如动画、过渡、形状、渐变等，这些都可以用来创建吸引人的视觉效果和动态用户界面，而无需依赖于重量级的JavaScript或Flash插件。

  7. 提高搜索引擎优化（SEO）：通过使用CSS，可以创建更加语义化的HTML结构，这有助于搜索引擎更好地理解页面内容的结构和重要性，从而提高网站在搜索结果中的排名。

作用

CSS（层叠样式表）的作用在网页开发和设计中至关重要，它具有以下主要功能和作用：

  1. 样式控制：CSS允许开发者精确控制网页中文本、图像和元素的样式。这包括字体样式、颜色、大小、行间距、文本对齐、链接表现等。

  2. 布局设计：CSS使得布局设计成为可能，不再依赖于HTML表格或其他传统方法。使用CSS，可以实现多栏布局、网格布局和弹性布局等复杂设计，以适应不同的屏幕大小和设备。

  3. 响应式网页设计：通过使用媒体查询（Media Queries），CSS可以根据不同的屏幕尺寸和设备特性来应用不同的样式规则。这使得创建响应式网站成为可能，确保网站在各种设备上都能提供良好的用户体验。

  4. 视觉效果：CSS提供了一系列视觉效果的实现方法，如阴影、圆角、透明度、过渡和动画效果，使得网页具有更加吸引人的视觉表现。

  5. 页面性能优化：使用外部样式表可以减少页面的代码冗余，因为样式信息可以被缓存并在多个页面之间共享。这可以减少页面加载时间，提升用户体验。

  6. 提升网站的可访问性：CSS允许开发者为不同的浏览设备（包括屏幕阅读器）提供更加适合的样式，提高网站的可访问性。

  7. 提高网站的可维护性：通过将样式信息从HTML中分离出来，CSS简化了网站的维护。当需要改变网站的视觉风格时，只需修改样式表，而不必触及HTML代码。

  8. 增强网站的互动性和动态效果：CSS3引入的动画和过渡效果使得无需使用JavaScript或Flash等技术，就能在用户与网页交互时产生动态效果，增强用户体验。

CSS通过提供这些功能和作用，使得网页开发者和设计师能够创建出既美观又功能强大的网站，同时确保内容的可访问性、网站的响应性以及维护的便捷性。

应用方式

CSS（Cascading Style Sheets）的应用方式主要分为三种：内部样式、行内样式和外部样式。每种方式有其适用场景和优先级，根据具体需求选择合适的引用方式是开发高质量网页的关键。下面是对这三种方式的详细说明和示例：

1. 内部样式（内联样式表）

内部样式通过在HTML文档的<head>部分放置<style>标签并在其中编写CSS代码来实现。这种方式适用于单个页面的样式定义，当样式仅在当前页面中有效时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 在这里写CSS代码 */
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

2. 行内样式

行内样式是通过在HTML元素的style属性中直接写入CSS代码来定义样式的方法。这种方式适用于对单个元素进行快速样式调整，但不推荐用于大规模样式定义，因为这样做会增加HTML代码的复杂性和维护难度。

1
<div style="color: red; font-size: 14px;">这是行内样式的示例文本。</div>

3. 外部样式（外联样式表）

外部样式通过创建一个单独的CSS文件（例如styles.css），然后在HTML文档的<head>部分使用<link>标签引入这个CSS文件来实现。这是最推荐的方法，因为它有利于样式的复用和维护，同时也减少了页面的加载时间。

1
2
3
4
5
6
7
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

CSS应用方式的优先级

当多种样式同时作用于同一个HTML元素时，CSS的应用方式决定了它们的优先级：行内样式 > 内部样式 > 外部样式。此外，样式表的优先级还受到CSS选择器权重、继承和!important声明的影响。在实际开发中，了解并正确应用这些原则是非常重要的，它们帮助开发者高效地管理和维护网页的样式。

选择器

CSS选择器是CSS中的一种模式，用于选择需要应用样式的元素。它们是CSS规则的关键组成部分，使开发者能够精确地定位到HTML文档中的元素。以下是关于常用CSS选择器的详细说明：

1. 标签选择器（元素选择器）

标签选择器，也称为元素选择器，使用HTML标签的名称作为选择器。它将样式应用于所有具有该标签名称的元素。这种选择器非常适合应用全局样式。

示例

1
2
3
4
5
6
7
8
9
10
11
<style>
  /* 所有的div元素都将应用以下样式 */
  div {
    color: blue;
    font-size: 16px;
  }
</style>

<body>
  <div>我是div标签</div>
</body>

2. 类选择器

类选择器使用点（.）作为前缀，后面跟上自定义的类名。通过HTML元素的class属性来应用对应的样式。类选择器非常灵活，因为同一个类可以应用于多个元素，同时一个元素也可以有多个类。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  /* 所有class为"name"的元素都将应用以下样式 */
  .name {
    color: red;
    font-weight: bold;
  }
</style>

<body>
  <div class="name">我是div标签</div>
  <div class="name">我是div标签</div>
  <div class="name">我是div标签</div>
</body>

3. ID选择器

ID选择器使用井号（#）作为前缀，后面跟上自定义的ID名称。通过HTML元素的id属性来应用对应的样式。ID选择器是唯一的，一个页面中的一个ID只能用于一个元素。

示例

1
2
3
4
5
6
7
8
9
10
11
<style>
  /* ID为"name"的元素将应用以下样式 */
  #name {
    color: green;
    font-size: 20px;
  }
</style>

<body>
  <div id="name">我是div标签</div>
</body>

使用建议和注意事项

  • 标签选择器适用于定义全局样式和元素的默认样式。
  • 类选择器非常灵活，适用于组件和重复元素的样式设计，支持复用。
  • ID选择器用于特定元素的唯一样式，但应谨慎使用，因为ID具有高优先级，可能导致样式覆盖问题。

在实际开发中，合理地组合使用这些选择器，可以创建出既美观又具有良好结构的网页。了解每种选择器的特点和使用场景，可以帮助开发者更高效地编写CSS代码，实现精确的样式控制。

CSS（Cascading Style Sheets）提供了丰富的属性用于控制网页上的元素样式。在这里，我们将聚焦于字体属性，它们是调整文本外观的重要工具，包括font-size、font-weight和font-family。通过合理应用这些属性，可以大幅提升网页内容的可读性和美观性。

属性

字体属性

1. font-size

font-size属性用于设置字体的大小，可以使用不同的单位，如像素(px)、em、rem等。

示例代码：

1
2
3
p {
  font-size: 16px; /* 设置字体大小为16像素 */
}

2. font-weight

font-weight属性用于设置字体的粗细。它可以取多个值，如normal、bold、或具体的数值（400对应normal，700对应bold）。

示例代码：

1
2
3
strong {
  font-weight: bold; /* 设置字体为粗体 */
}

3. font-family

font-family属性用于设置元素的字体。可以指定一个字体列表，浏览器将按列表顺序尝试使用，直到找到可用的字体。

示例代码：

1
2
3
body {
  font-family: "Arial", "Helvetica", sans-serif; /* 如果Arial不可用，则尝试Helvetica，依此类推 */
}

完整示例

在下面的示例中，我们将展示如何在HTML文档的<head>部分使用内部样式来定义ID选择器#name的字体样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #name {
      font-size: 20px; /* 设置字体大小为20像素 */
      font-weight: 400; /* 设置字体粗细为400，即正常粗细 */
      font-family: '仿宋', '宋体', serif; /* 设置字体为仿宋，如果不可用，则尝试宋体 */
    }
  </style>
</head>
<body>
  <div id="name">我是div标签</div>
</body>

通过这个示例，我们可以看到如何利用CSS字体属性来改善网页上文本的表现。记住，在实际开发中选择字体时要考虑到字体的可用性和版权问题，特别是在使用非标准或商业字体时。正确使用字体属性不仅能够提升网页的视觉效果，还能改善用户的阅读体验。

文本属性

在CSS中，处理文本的外观和布局是常见的需求。line-height和text-align是两个重要的文本属性，它们分别控制文本的行高和水平对齐方式。理解并正确应用这些属性对于改善网页的可读性和美观性至关重要。

1. line-height（行高）

  • 含义：line-height属性用于设置行间的距离，即一行文本的底部到下一行文本顶部的距离。它决定了文本的垂直间距，对提高文本的可读性非常重要。
  • 单位：可以使用不同的单位来设置line-height，包括像素(px)、百分比(%)、em、或没有单位的数值（相对于当前字体大小的倍数）。使用没有单位的数值可以保持字体大小与行高之间的相对关系，即使字体大小发生变化。

示例代码：

1
2
3
p {
  line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
}

2. text-align（水平对齐）

  • 含义：text-align属性用于设置文本的水平对齐方式。它可以控制文本在其包含块内的对齐方式。
  • 取值：
    • left：文本左对齐。
    • center：文本居中对齐。
    • right：文本右对齐。
    • justify：文本两端对齐，自动调整单词间的间距来实现这一效果。

示例代码：

1
2
3
p {
  text-align: center; /* 文本居中对齐 */
}

应用示例

结合line-height和text-align，可以控制文本的垂直间距和水平对齐方式，从而创建出既舒适又美观的文本布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
  }
  p {
    line-height: 1.6; /* 提高行间距，增强可读性 */
    text-align: justify; /* 文本两端对齐，提升文档的正式性 */
    margin: 20px; /* 增加段落周围的空间 */
  }
</style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
  </p>
</body>
</html>

通过合理设置这些文本属性，可以大大提升网页内容的阅读体验。

颜色

  • color: 用于设置文本的颜色。可以使用颜色名（如red）、十六进制值（如#FF0000）、RGB（如rgb(255, 0, 0)）、RGBA（如rgba(255, 0, 0, 0.5)）、HSL（如hsl(0, 100%, 50%)）等方式指定颜色。
  • background-color: 用于设置元素的背景颜色。颜色的指定方式同color属性。

示例代码

1
2
3
4
div {
  color: #f7f2f2; /* 设置文本颜色 */
  background-color: red; /* 设置背景颜色 */
}

盒子模型

在CSS中，每个元素都被视为一个盒子，这些盒子共同构成了网页的布局。盒子模型包括几个关键的组成部分：内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin），以及可选的背景信息。

属性

  • width 和 height: 分别设置盒子的宽度和高度。默认情况下，这些尺寸仅包括内容区域，不包含内边距、边框或外边距。
  • border: 设置元素的边框样式、宽度和颜色。
  • padding: 设置元素内容与边框之间的空间，即内边距。
  • margin: 设置元素与其他元素之间的空间，即外边距。
  • border-radius: 设置边框角的圆滑度。当设置为50%时，如果盒子的宽度和高度相等，盒子将呈现为圆形。

示例代码

1
2
3
4
5
6
7
8
div {
  width: 100px;
  height: 100px;
  border: 1px solid #000; /* 边框为1px黑色实线 */
  padding: 10px; /* 内边距 */
  margin: 10px; /* 外边距 */
  border-radius: 10px; /* 边框圆角 */
}

清除默认的内外边距

网页元素默认带有内外边距，这有时会影响布局效果。使用CSS可以全局重置这些默认值，以确保页面在不同浏览器中具有一致的外观。

示例代码

1
2
3
4
5
* {
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  box-sizing: border-box; /* 当设置width和height时，元素的边框和内边距的空间也包含在内 */
}

信息

行内块（Inline-Block）与行内（Inline）元素

  • div（行内块元素的使用场景）：默认情况下，div是一个块级元素，用于布局和容纳其他元素。通过将div的display属性设置为inline-block，可以使其同时拥有行内元素和块级元素的特性。这意味着它可以像行内元素一样在文本流中不换行显示，同时又可以设置宽度和高度。

  • span（行内元素）：span是一个典型的行内元素，主要用于对文本的小块进行样式设置。默认情况下，行内元素不能设置宽度和高度，因为它们的尺寸由内容决定。但是，通过将span或其他行内元素的display属性改为inline-block，可以使其支持宽度和高度的设置。

盒子居中

使用margin: 0 auto;是一个常用的技巧，用于将块级元素在其父容器中水平居中。为了使这个技巧有效，元素必须有一个指定的宽度。

示例代码：

1
2
3
4
.centered-div {
  width: 50%; /* 指定宽度 */
  margin: 0 auto; /* 上下边距为0，左右自动调整以居中 */
}

清除浏览器的默认内外边距

浏览器为许多HTML元素提供了默认的内外边距，这可能会影响到布局。使用通配符（*）选择器设置所有元素的margin和padding为0是一个常见的做法，用来重置这些默认样式，以保证跨浏览器的一致性。

示例代码：

1
2
3
4
5
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 添加box-sizing以包含边框和内边距在元素的宽度和高度内 */
}

注意，代码中的box-sizing: border-box;是一个有用的补充，它更改了盒子模型的工作方式，使元素的宽度和高度包含其边框和内边距，这样做可以简化布局的计算。

CSS中的:hover伪类选择器用于定义当鼠标悬停在元素上时的样式。这是一种常用的技术，用于增强网页的交互性和视觉反馈。通过使用:hover，你可以指定元素在用户鼠标悬停时的不同样式，例如改变背景颜色、文字颜色、边框等。这里，我们将详细说明如何使用:hover来创建移入效果，并给出一个具体的示例。

移入效果

使用:hover创建移入效果

:hover伪类可以应用于任何元素，不仅限于链接。当元素处于悬停状态（即鼠标指针悬浮在元素上方）时，:hover伪类就会被激活，元素的样式将根据:hover后定义的规则改变。

示例：改变背景色和文字颜色

假设有一个类名为.box2的元素，你想要在鼠标悬停时改变其背景色和文字颜色，可以这样编写CSS：

1
2
3
4
.box2:hover {
  background-color: rgb(85, 219, 61); /* 鼠标悬停时的背景颜色 */
  color: #fff; /* 鼠标悬停时的文字颜色 */
}

HTML结构

1
<div class="box2">1</div>

在这个示例中，.box2是一个div元素的类名。当用户将鼠标指针移动到这个div上时，它的背景色将变为绿色（RGB(85, 219, 61)），文字颜色变为白色（#fff）。

注意事项

  • 使用:hover时，确保选择的颜色或样式变化在视觉上有明显区别，以便用户可以清楚地看到效果变化。
  • 虽然:hover主要用于鼠标悬停效果，但在触摸设备上，这种效果可能会有所不同。在设计时应考虑到这一点，确保网站或应用在不同设备上的可用性。

通过合理使用:hover伪类，可以在不增加JavaScript代码的情况下，仅通过CSS就能创建出丰富的交互效果，提升用户体验。

在CSS中，定位（Positioning）是一种强大的布局工具，允许你控制元素的位置。通过使用position属性，你可以定义元素是如何在页面上定位的。这里我们将探讨position属性的几种不同类型：relative、absolute、和fixed，以及如何使用它们。

定位 Position

1. 相对定位（Relative Positioning）

当元素设置为相对定位（position: relative;）时，它将相对于其原始（正常流）位置进行定位。你可以使用top、right、bottom和left属性来指定元素应该移动的距离。

示例：

1
2
3
4
5
6
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}

2. 绝对定位（Absolute Positioning）

绝对定位的元素（position: absolute;）是相对于最近的已定位的祖先元素进行定位的。如果没有已定位的祖先元素，那么它将相对于文档的<html>元素进行定位。绝对定位使元素脱离正常文档流。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
.box {
  position: relative; /* 父元素设置为相对定位 */
}

.box1 {
  width: 80px;
  height: 80px;
  background-color: blue;
  position: absolute;
  bottom: 10px; /* 距离父元素底部10px */
  left: 20px; /* 距离父元素左边20px */
}

3. 固定定位（Fixed Positioning）

固定定位（position: fixed;）的元素是相对于浏览器窗口进行定位的，即使页面滚动，元素也会保持在指定的位置。这通常用于创建始终可见的导航栏。

示例：

1
2
3
4
5
6
7
8
.box {
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0; /* 距离浏览器窗口顶部是0px */
  left: 0; /* 距离浏览器窗口左边是0px */
  background-color: red;
}

注意事项：

  • 脱离文档流：使用absolute和fixed定位的元素会从正常的文档流中脱离出来，这意味着它们不会影响其他元素的布局。
  • 块级和行内元素：定位属性可应用于块级和行内元素。
  • 祖先元素的影响：对于绝对定位，元素的位置是相对于最近的已定位祖先元素确定的。如果没有这样的祖先，那么它相对于初始包含块定位。

Flex布局

Flex布局，也称为弹性布局，自2009年由W3C提出以来，已经成为现代网页设计中不可或缺的布局解决方案。它旨在提供一种更高效、更灵活的方式来设计、布置和分配容器内项目的空间，无论容器的大小如何变化。Flex布局特别适用于响应式设计和复杂组件布局中。现在，Flex布局已获得所有现代浏览器的广泛支持，可以安全地在生产环境中使用。

何为Flex布局

Flex布局即“弹性布局”，它允许容器内的子元素能够按照指定的方向排列，并且这些子元素的尺寸可以根据额外空间的多少进行伸缩。使用Flex布局，开发者可以轻松实现各种复杂的布局结构，同时保持代码的简洁性和可维护性。

使用Flex布局

要使用Flex布局，首先需要在父容器上设置display: flex;属性。这一步将该容器指定为Flex容器，其直接子元素将成为Flex项目（Flex items），并开始遵循Flex布局的规则。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.box {
  display: flex;
}

.box_hz {
  padding: 20px;
  border: 1px solid #000;
}
</style>

<div class="box">
  <div class="box_hz">1</div>
  <div class="box_hz">2</div>
</div>

响应式Flex项目

在Flex布局中，可以通过flex属性来控制Flex项目的伸缩性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。通过调整这些值，可以控制Flex项目如何增长（占据更多空间）或收缩（占据较少空间），以及它们在默认情况下应该有多大。

设置flex: 1意味着所有子元素将等分容器的空间，如果空间不足，它们也会等比例缩小以适应容器。

增强的示例代码：

1
2
3
4
5
.box_hz {
  padding: 20px;
  border: 1px solid #000;
  flex: 1; /* 使子盒子响应式 */
}

通过上述设置，.box_hz中的每个子元素将平等地分配.box容器的空间，从而实现了响应式设计。

总结

Flex布局极大地简化了复杂布局的实现过程，使得开发者可以更加专注于内容和功能的实现，而不必担心布局问题。通过使用Flex布局，可以创建出灵活、适应性强且易于维护的网页布局，从而提升用户体验和开发效率。

Flex布局中的容器属性是管理和控制Flex容器内部元素排列的关键。特别是justify-content和align-items属性，它们分别控制容器内项目沿主轴（x轴）和交叉轴（y轴）的对齐方式。下面是这些属性的详细说明及示例，帮助你更好地理解和使用Flex布局。

Flex容器

容器的属性

1. justify-content：沿主轴（水平方向）的对齐方式

  • **flex-start**（默认）：项目位于容器的开始位置。
  • **center**：项目位于容器的中心。
  • **flex-end**：项目位于容器的末尾。
  • **space-between**：项目之间的间隔相等，第一个项目在容器的开始位置，最后一个项目在容器的末尾。
  • **space-around**：项目周围的间隔相等。每个项目两侧的空间相等。
  • **space-evenly**：项目和容器边缘之间的空间以及项目之间的空间都相等。

2. align-items：沿交叉轴（垂直方向）的对齐方式

  • **flex-start**：项目位于容器的起始边缘。
  • **center**：项目位于容器的中心。
  • **flex-end**：项目位于容器的末端。
  • **baseline**：项目的基线对齐。
  • **stretch**（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例

下面的示例展示了一个Flex容器（.box1），它将内部的两个Flex项目（.box2）在水平和垂直方向上居中对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.box1 {
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: flex;
  justify-content: center; /* 沿主轴居中对齐 */
  align-items: center; /* 沿交叉轴居中对齐 */
}

.box2 {
  height: 30px;
  width: 50px;
  border: 1px solid #000;
  margin: 10px; /* 为了更清楚地展示两个项目，添加了margin */
}
</style>

<div class="box1">
  <div class="box2">1</div>
  <div class="box2">2</div>
</div>

在这个例子中，.box1是一个Flex容器，它通过设置justify-content: center;和align-items: center;属性来确保所有子项目（.box2）在容器中水平和垂直居中对齐。这是创建中心对齐布局的常用方法，特别适合于制作登录页面、居中卡片等布局结构。

理解和掌握justify-content和align-items这两个属性，对于使用Flex布局来说是非常重要的，它们提供了强大的对齐控制能力，使得布局变得既简单又灵活。

  • 标题: CSS
  • 作者: Yiuhang Chan
  • 创建于 : 2018-11-24 17:16:34
  • 更新于 : 2024-03-06 19:13:08
  • 链接: https://www.yiuhangblog.com/2018/11/24/20181124CSS/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
此页目录
CSS
  1. 什么是CSS
  2. 为什么使用CSS
  3. 作用
  4. 应用方式
    1. 1. 内部样式（内联样式表）
    2. 2. 行内样式
    3. 3. 外部样式（外联样式表）
    4. CSS应用方式的优先级
  5. 选择器
    1. 1. 标签选择器（元素选择器）
      1. 示例
    2. 2. 类选择器
      1. 示例
    3. 3. ID选择器
      1. 示例
    4. 使用建议和注意事项
  6. 属性
    1. 字体属性
      1. 1. font-size
      2. 示例代码：
      3. 2. font-weight
      4. 示例代码：
      5. 3. font-family
      6. 示例代码：
    2. 文本属性
      1. 1. line-height（行高）
      2. 示例代码：
      3. 2. text-align（水平对齐）
      4. 示例代码：
      5. 应用示例
    3. 颜色
      1. 示例代码
    4. 盒子模型
      1. 属性
      2. 示例代码
    5. 清除默认的内外边距
      1. 示例代码
  7. 移入效果
    1. 使用:hover创建移入效果
    2. 示例：改变背景色和文字颜色
    3. HTML结构
    4. 注意事项
  8. 定位 Position
    1. 1. 相对定位（Relative Positioning）
      1. 示例：
    2. 2. 绝对定位（Absolute Positioning）
      1. 示例：
    3. 3. 固定定位（Fixed Positioning）
      1. 示例：
    4. 注意事项：
  9. Flex布局
    1. 何为Flex布局
    2. 使用Flex布局
      1. 示例代码：
    3. 响应式Flex项目
      1. 增强的示例代码：
    4. 总结
  10. Flex容器
    1. 容器的属性
      1. 1. justify-content：沿主轴（水平方向）的对齐方式
      2. 2. align-items：沿交叉轴（垂直方向）的对齐方式
    2. 示例