css 样式新手教程

1、vw 和 vh 单位详解

视口是用户在网页中看到的区域，不包括浏览器的工具栏、地址栏等界面元素。

基本概念：

• vw：视口宽度的百分比（Viewport Width）

  • 100vw = 视口宽度的 100%

  • 50vw = 视口宽度的 50%

  • 1vw = 视口宽度的 1%

• vh：视口高度的百分比（Viewport Height）

  • 100vh = 视口高度的 100%

  • 75vh = 视口高度的 75%

  • 1vh = 视口高度的 1%

与百分比（%）的区别：

/* 使用 % - 相对于父元素 */
.container {
  width: 100%;  /* 父元素宽度的100% */
}

/* 使用 vw/vh - 相对于视口 */
.container {
  width: 100vw;  /* 视口宽度的100% */
  height: 100vh; /* 视口高度的100% */
}

关键区别：

• % 继承父元素的尺寸

• vw/vh 直接相对于浏览器视口

2、.flex-row CSS 类详细解释

这个 CSS 类将一个元素转换为 Flex 容器 ，并将其子元素水平排列。

display: flex;

• 将元素设置为 Flex 容器

• 使所有直接子元素成为 Flex 项目

• 开启 Flexbox 布局模式

flex-direction: row;

• 设置主轴方向为 水平方向（从左到右）

• 这是 Flexbox 的默认方向，所以实际上可以不写

• 但显式声明可以提高代码可读性

主轴和交叉轴概念：

flex-direction: row; 时的布局：
主轴 (Main Axis)：水平方向 ←→
交叉轴 (Cross Axis)：垂直方向 ↑↓

┌───────────────────────────────────┐
│ 项目1    项目2    项目3            │ ← 水平排列
└───────────────────────────────────┘

其他 flex-direction 选项对比：

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse; /* 从右到左 */
  /* [项目3] [项目2] [项目1] */
}

.flex-column {
  display: flex;
  flex-direction: column; /* 从上到下 */
  /* [项目1]
     [项目2]
     [项目3] */
}

.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 从下到上 */
  /* [项目3]
     [项目2]
     [项目1] */
}

对齐方式（常用组合）

.flex-row {
  display: flex;
  flex-direction: row;
  
  /* 主轴对齐（水平方向） */
  justify-content: flex-start;    /* 默认：左对齐 */
  justify-content: center;        /* 水平居中 */
  justify-content: flex-end;      /* 右对齐 */
  justify-content: space-between; /* 两端对齐，项目间等距 */
  justify-content: space-around;  /* 项目两侧等距 */
  justify-content: space-evenly;  /* 完全等距 */
  
  /* 交叉轴对齐（垂直方向） */
  align-items: stretch;     /* 默认：拉伸填满 */
  align-items: flex-start;  /* 顶部对齐 */
  align-items: center;      /* 垂直居中 */
  align-items: flex-end;    /* 底部对齐 */
  align-items: baseline;    /* 基线对齐 */
}

/* 示例：水平垂直居中 */
.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

换行控制

.flex-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 允许换行 */
  /* 当空间不足时，项目会自动换到下一行 */
}

.flex-row-nowrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* 默认：不换行 */
  /* 项目会压缩或溢出 */
}

/* 简写方式 */
.flex-row {
  display: flex;
  flex-flow: row wrap; /* flex-direction + flex-wrap */
}

间距和间隙

.flex-row {
  display: flex;
  flex-direction: row;
  
  gap: 10px; /* 项目之间的间隙 */
  /* 或者分别设置 */
  row-gap: 10px;    /* 行间隙 */
  column-gap: 20px; /* 列间隙 */
}

Flex 项目的相关属性：

.item {
  flex-grow: 1;      /* 放大比例（默认0） */
  flex-shrink: 1;    /* 缩小比例（默认1） */
  flex-basis: 100px; /* 基础尺寸 */
  
  /* 简写 */
  flex: 1; /* 相当于 flex: 1 1 0% */
  flex: none; /* 相当于 flex: 0 0 auto */
  
  /* 单独对齐 */
  align-self: center; /* 覆盖容器的 align-items */
  
  /* 排序 */
  order: 1; /* 数值越小，排列越靠前 */
}

浏览器支持：

.flex-row {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}