CSS3 其他功能

14. CSS Flexbox 布局 (CSS Flexbox Layout)

Flexbox 布局 是一种一维布局模型，适用于处理纵向或横向的空间分配。

14.1 基本概念

基本语法：

.container {
  display: flex;
  flex-direction: row; /* 行方向 */
  flex-wrap: wrap;     /* 换行 */
}

.item {
  flex: 1;             /* 分配空间 */
}

display: flex: 将容器定义为 Flexbox 布局。
flex-direction: 定义主轴方向（row、column）。
flex-wrap: 控制是否换行（wrap、nowrap）。

示例代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 主轴对齐方式 */
  align-items: center;            /* 交叉轴对齐方式 */
}

.item {
  flex: 1; /* 所有子项平分容器的空间 */
}

解释：

justify-content: space-between 在主轴上均匀分布子项。
align-items: center 在交叉轴上居中对齐子项。

14.2 Flex 属性

flex 属性 是一个简写属性，用于控制子项在主轴上的空间分配。

基本语法：

.item {
  flex-grow: 1;    /* 放大比例 */
  flex-shrink: 1;  /* 缩小比例 */
  flex-basis: 100px; /* 初始大小 */
}

示例代码：

.item {
  flex: 2; /* 等同于 flex-grow: 2; flex-shrink: 1; flex-basis: 0% */
}

解释：

flex: 2 表示子项在主轴上放大比例为 2，缩小比例为 1，初始大小为 0%。

15. CSS 变量 (CSS Variables)

CSS 变量 允许你在 CSS 中定义和重用值，从而使样式更具可维护性和灵活性。

15.1 定义和使用 CSS 变量

基本语法：

:root {
  --main-color: #3498db; /* 定义全局变量 */
}

.element {
  color: var(--main-color); /* 使用变量 */
}

示例代码：

:root {
  --primary-bg-color: #f0f0f0;
  --primary-text-color: #333;
}

.container {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
}

解释：

--primary-bg-color 和 --primary-text-color 是 CSS 变量，用于控制背景色和文本色。
var(--primary-bg-color) 和 var(--primary-text-color) 使用这些变量。

15.2 变量的作用域

全局变量: 在 :root 中定义，适用于整个文档。
局部变量: 在特定选择器中定义，仅适用于该选择器及其子元素。

示例代码：

.container {
  --local-color: #e74c3c; /* 局部变量 */
}

.element {
  color: var(--local-color); /* 使用局部变量 */
}

解释：

--local-color 仅适用于 .container 和其子元素。

16. CSS 自定义属性 (Custom Properties)

自定义属性 允许你为元素定义并使用自定义的样式属性，提供更大的灵活性和控制力。

16.1 基本用法

示例代码：

:root {
  --main-color: #2ecc71;
}

.box {
  border: 2px solid var(--main-color);
}

解释：

--main-color 用于定义边框颜色，可以在其他样式规则中复用。

16.2 动态修改

示例代码：

.box {
  --box-size: 100px;
  width: var(--box-size);
  height: var(--box-size);
}

.box.large {
  --box-size: 200px;
}

解释：

.box 默认大小为 100px，.box.large 修改了变量值，使大小变为 200px。

17. CSS3 3D 转换 (3D Transforms)

3D 转换 允许你在三维空间中旋转、移动和缩放元素，创建丰富的视觉效果。

17.1 3D 转换基本属性

基本语法：

.container {
  perspective: 500px; /* 设置视角 */
}

.item {
  transform: rotateX(45deg) rotateY(30deg);
}

perspective: 设置视角深度，影响 3D 效果的强度。
transform: 进行 3D 变换，如 rotateX、rotateY。

示例代码：

.container {
  perspective: 1000px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transform: rotateY(45deg) rotateX(30deg);
}

解释：

perspective: 1000px 设置 3D 视角深度，rotateY(45deg) 和 rotateX(30deg) 对元素进行旋转。

17.2 3D 变换的高级用法

示例代码：

.container {
  perspective: 1500px;
  transform-style: preserve-3d; /* 保持 3D 变换 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  transform: rotateY(45deg) translateZ(50px);
}

解释：

transform-style: preserve-3d 保持 3D 变换，translateZ(50px) 将元素在 Z 轴上移动 50px。

18. 媒体查询 (Media Queries)

媒体查询 允许你应用不同的样式规则，基于设备的特性，如屏幕大小、方向等，实现响应式设计。

18.1 基本用法

基本语法：

@media (max-width: 600px) {
  .container {
    font-size: 14px;
  }
}

max-width: 当视口宽度小于或等于 600px 时，应用特定样式。

示例代码：

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  .navbar {
    flex-direction: row;
  }
}

解释：

小于 768px 宽度时，.navbar 元素变为纵向排列。
大于或等于 769px 宽度时，.navbar 元素变为横向排列。

18.2 媒体特性

orientation: 选择设备的方向（portrait 或 landscape）。
resolution: 根据设备的分辨率应用样式。

示例代码：

@media (orientation: landscape) {
  .container {
    background-color: lightblue;
  }
}

@media (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url('high-res.png');
  }
}

解释：

横屏设备应用浅蓝色背景。
高分辨率设备应用高清背景图。

以上就是 CSS3 的其他功能 的详细讲解。CSS3 提供了许多功能和技术，帮助你创建复杂和响应式的网页布局，提升用户体验。