CSS3（Cascading Style Sheets Level 3）是CSS（Cascading Style Sheets）规范的第三个主要版本。CSS3引入了许多新的特性和增强，以帮助开发者更灵活、更轻松地设计和样式化网页。

以下是CSS3的一些主要特性：

`box-sizing`

box-sizing 属性是 CSS3 中引入的特性之一。这个属性的主要作用是控制盒模型的解析方式，即定义元素的宽度和高度的计算方式。

在标准的盒模型中，元素的宽度和高度包括内容、内边距（padding）、边框（border）以及外边距（margin）。而使用 box-sizing 属性，你可以改变盒模型的行为，有两个可选的值：

content-box（默认值）： 元素的宽度和高度只包括内容的宽度和高度，不包括内边距、边框和外边距。
css 复制代码
```
.element {
  box-sizing: content-box;
}
```
border-box： 元素的宽度和高度包括内容、内边距和边框的宽度，但不包括外边距。
css 复制代码
```
.element {
  box-sizing: border-box;
}
```

这个特性使得在进行布局时更加方便，尤其是在处理元素尺寸的时候。默认的 content-box 模型在一些情况下可能导致布局计算变得复杂，而 border-box 则更符合直觉，特别是在设计响应式布局时。

Flexbox（弹性盒子布局）

`flex-basis`和`width`有什么区别

flex-basis 和 width 都用于定义元素的大小，但在使用上有一些关键的区别，主要取决于它们所应用的布局模型。

Flexbox 布局中的区别：
- flex-basis： 用于指定弹性元素在主轴上的初始大小。在 Flexbox 中，flex-basis 设置了项目在主轴上的初始尺寸，决定了项目在没有 flex-grow 或 flex-shrink 影响时的大小。
css 复制代码
```
.flex-item {
  flex-basis: 200px; /* 设置初始大小为200像素 */
}
```
- width： 在 Flexbox 中，width 通常不用于设置弹性容器的子项的大小。Flexbox 更倾向于使用 flex-basis 来确定初始大小，然后根据 flex-grow 和 flex-shrink 动态调整大小。
普通布局模型中的区别：
- width： 用于设置元素的宽度。在普通的块级布局中，通过 width 可以明确地设置元素的宽度。
css 复制代码
```
.block-item {
  width: 300px; /* 设置元素宽度为300像素 */
}
```
- flex-basis： 在非 Flexbox 布局中，flex-basis 通常不被使用。在这种情况下，建议使用 width 来设置元素的宽度。

简单理解就是flex-basis 常用于设置Flexbox 布局中元素的初始大小，width 常用于设置在普通布局模型中元素大小。

同时设置`flex-basis` 和 `width` 产生什么效果

在 Flexbox 布局中，当同时设置了 width 和 flex-basis 时，存在一些优先级规则，决定哪个属性会起作用。具体规则如下：

当 flex-basis 与 width 都设置为具体的长度值时：
- 如果 flex-basis 的值为 auto，那么 width 的值将起作用，因为 auto 意味着由元素的内容或 width 决定。
- 如果 flex-basis 的值为具体的长度值（如像素），那么 flex-basis 会覆盖 width，元素的初始大小将由 flex-basis 决定。
css 复制代码
```
.flex-item {
  width: 300px;      /* 如果flex-basis为auto，这里的width会被覆盖 */
  flex-basis: 200px; /* 设置初始大小为200像素 */
}
```

2. 当 flex-basis 为百分比值时：

~~如果 flex-basis 的值为百分比，它将被解释为相对于父容器的百分比，而 width 的值将不受影响。~~

~~如果 flex-basis 的百分比值导致项目的初始大小超过了 width 的值，那么 width 可能看起来没有生效，因为项目的大小受到 flex-basis 的限制。~~

总体而言，flex-basis 用于定义项目在主轴上的初始大小，而 width 用于设置元素的具体宽度。在设置这两个属性时，需要注意它们之间的优先级关系，具体取决于它们的值和上下文。

个人体验就是如果flex-basis设置了具体值，flex-basis优先，如果没有设置或者是auto，那就用width

骰子布局

阮一峰

Grid（网格布局）

项目开发中用到比较少，后续学习~~~

过渡和动画

`transform`：2D 转换和 3D 转换

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

`@keyframes`

@keyframes 是 CSS 中用于创建动画的规则。它允许你定义一个包含关键帧（keyframes）的动画序列，描述元素在不同时间点上的样式变化。

基本的语法结构如下：

css 复制代码

@keyframes animationName {
  0% {
    /* styles at 0% keyframe */
  }
  50% {
    /* styles at 50% keyframe */
  }
  100% {
    /* styles at 100% keyframe */
  }
}

animationName 是动画的名称，可以自定义。
0%, 50%, 100% 是关键帧的百分比，表示动画的不同阶段。
在每个关键帧中，你可以定义元素在该阶段的样式。

然后，你可以将这个动画应用到一个元素上：

css 复制代码

.element {
  animation: animationName 3s ease infinite;
}

animationName 是你定义的动画名称。
3s 是动画的持续时间（3秒）。
ease 是动画的时间函数（easing function），它定义了动画的加速和减速模式。
infinite 表示动画会无限循环播放。

这是一个简单的例子，展示了如何使用 @keyframes 创建一个简单的闪烁动画：

css 复制代码

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.element {
  animation: blink 2s ease infinite;
}

在这个例子中，.element 元素将在 blink 动画中根据定义的关键帧产生闪烁效果。

`transition`过渡

transition 是 CSS 中用于实现过渡效果的属性。它允许你在 CSS 属性值发生变化时，以平滑的方式过渡到新的状态，而不是瞬间改变。这为用户提供了更流畅的界面体验。

基本的 transition 属性语法如下：

css 复制代码

selector {
  transition: property duration timing-function delay;
}

property: 指定要过渡的 CSS 属性，比如 width、color 等。
duration: 过渡的持续时间，可以是秒(s)或毫秒(ms)。
timing-function: 过渡的速度曲线，控制过渡效果的加速度。常见的值包括 ease、linear、ease-in、ease-out 等。
delay: 过渡开始前的延迟时间，同样可以是秒(s)或毫秒(ms)。

例如：

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out 0.5s;
}

.box:hover {
  width: 200px;
}

在这个例子中，当鼠标悬停在 .box 元素上时，width 属性将在1秒的时间内以 ease-in-out 的速度曲线过渡到新的状态，并在0.5秒后开始过渡。

常见用途包括：

悬停效果： 当鼠标悬停在元素上时，产生平滑的效果变化。
状态变化： 当元素的某个属性变化时，通过过渡效果使其更加平滑。
导航菜单： 在展开或折叠菜单时，使用过渡效果使动画看起来更自然。

注意：transition 不仅适用于鼠标事件触发的变化，也可以用于初始加载时的过渡。

transition 常用来配合伪类使用，但并不是强制的。比如按钮点击之后添加class到classList，只要新添加的class存在要过渡的属性，就是可以的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>状态变化的例子</title>
    <style>
      .status-button {
        padding: 10px;
        background-color: blue;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color, padding 3s ease-in-out;
      }

      .active {
        background-color: red;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <button class="status-button">点击我</button>
  </body>
  <script>
    const element = document.querySelector('.status-button');
    element.addEventListener('click', function () {
      element.classList.add('active');
    });
  </script>
</html>

多列布局

CSS3 的多列布局（Multi-column Layout）允许将文本内容分割成多个列，这样可以更好地利用屏幕空间，提高页面的可读性。多列布局通常用于创建报纸或杂志风格的页面，其中文本按列排列。

多列布局适用于大段文本，尤其在响应式设计中，可以更好地适应不同屏幕大小。需要注意的是，多列布局并非适用于所有类型的内容，有些情况下可能需要谨慎使用。

选择器的增强

背景和边框的增强

CSS3 对背景和边框进行了多方面的增强，引入了一些新的属性和功能，以提供更灵活、更丰富的样式。以下是一些 CSS3 背景和边框的增强特性：

媒体查询

CSS3 媒体查询是一种在样式表中使用的技术，它允许根据设备或浏览器的特定特征来应用不同的样式规则。媒体查询的作用主要包括以下几个方面：

响应式设计（Responsive Design）： 最常见的媒体查询用途是创建响应式设计，以适应不同屏幕尺寸和设备类型。通过使用媒体查询，可以根据屏幕宽度、高度、方向等特性来调整页面的布局和样式。
css 复制代码
```
@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于 600px 时应用的样式 */
  body {
    font-size: 14px;
  }
}
```
打印样式（Print Styles）： 使用媒体查询可以定义在打印页面时应用的样式。这使得开发者可以为打印输出优化页面的显示，例如隐藏不必要的元素或调整排版。
css 复制代码
```
@media print {
  /* 在打印时应用的样式 */
  .no-print {
    display: none;
  }
}
```
设备适配（Device Adaptation）： 通过媒体查询，可以根据设备的一些属性，如分辨率、像素比等，为不同设备提供定制的样式。这有助于为高分辨率屏幕或特定设备提供更好的用户体验。
css 复制代码
```
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 在特定设备范围内应用的样式 */
  body {
    background-color: lightblue;
  }
}
```
功能适配（Feature Adaptation）： 根据设备的功能（如是否支持触摸、是否支持颜色等）调整页面样式，以提供更好的用户体验。
css 复制代码
```
@media (hover: hover) and (pointer: fine) {
  /* 在支持触摸且有鼠标的设备上应用的样式 */
  .touch-device {
    background-color: #f0f0f0;
  }
}
```

通过媒体查询，可以更加灵活地适应不同的环境和设备，提供更好的用户体验，使得网页设计更具响应性。

响应式和自适应的区别

"响应式设计"和"自适应设计"都是为了让网站或应用在不同设备上提供更好的用户体验而采取的设计策略，但它们有一些微妙的区别。

响应式设计（Responsive Design）：

弹性网格布局： 使用相对单位和百分比来定义网格布局，使得页面的布局能够随着视口大小的变化而灵活调整。
媒体查询： 使用 CSS3 中的媒体查询，根据不同的屏幕尺寸、设备特性等条件应用不同的样式规则。
图片和媒体资源： 使用弹性图片和媒体资源，使其能够根据视口大小调整大小或切换不同的资源。
流式布局（Fluid Layout）： 页面中的元素相对于视口大小进行动态调整，以适应不同设备的屏幕尺寸。

响应式设计的目标是创建一个能够在各种设备上提供一致且灵活的用户体验的网站。

自适应设计（Adaptive Design）：

特定断点： 使用特定的断点（固定的屏幕宽度范围）来调整布局和样式，而不是通过连续的流式布局来适应各种屏幕尺寸。
固定布局： 使用特定的布局结构，根据屏幕尺寸的变化应用不同的布局，而不是使用相对单位和百分比。
适配性更强： 相较于响应式设计，自适应设计更侧重于在一些特定的设备范围内提供更精细的调整。
服务器端适应： 通过服务器端技术检测用户设备，并提供相应的 HTML、CSS 和 JavaScript，以更好地适应特定设备。

自适应设计的目标是为特定的设备或设备范围提供优化的用户体验，通常需要为每个目标设备或屏幕尺寸设计不同的布局和样式。

综合：

通常，"响应式设计"和"自适应设计"并不是严格区分的术语，而是在实践中可能会结合使用，根据具体的设计需求和项目目标采取不同的策略。在现代的前端开发中，通常会使用响应式的思想，同时结合一些自适应的技术，以在不同的设备和屏幕上提供更好的用户体验。

滤镜效果

CSS3引入了滤镜效果，包括模糊、对比度、饱和度等，可以通过CSS应用于元素。 CSS3 的滤镜效果提供了一系列功能，可以实现各种视觉效果，用于改变元素的外观和渲染。以下是一些常见的需求，通过滤镜效果可以实现：

图像处理：
- 灰度图像： 使用 grayscale 滤镜将图像转换为灰度。
- 深褐色图像： 使用 sepia 滤镜将图像转换为深褐色。
css 复制代码
```
.image {
  filter: grayscale(100%);
}

.image-sepia {
  filter: sepia(100%);
}
```
亮度和对比度调整：
- 增加亮度： 使用 brightness 滤镜增加元素的亮度。
- 增加对比度： 使用 contrast 滤镜增加元素的对比度。
css 复制代码
```
.element-bright {
  filter: brightness(150%);
}

.element-contrast {
  filter: contrast(200%);
}
```
颜色调整：
- 反转颜色： 使用 invert 滤镜反转元素的颜色。
- 调整饱和度： 使用 saturate 滤镜调整元素的饱和度。
- 色相旋转： 使用 hue-rotate 滤镜旋转元素的色相。
css 复制代码
```
.element-invert {
  filter: invert(100%);
}

.element-saturate {
  filter: saturate(200%);
}

.element-hue {
  filter: hue-rotate(90deg);
}
```
模糊效果： 使用 blur 滤镜为元素添加模糊效果。
css 复制代码
```
.element-blur {
  filter: blur(5px);
}
```
阴影效果： 使用 drop-shadow 滤镜为元素添加阴影效果。
css 复制代码
```
.element-shadow {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
```

这些滤镜效果可以单独应用，也可以组合使用，根据设计需求创造出各种独特的视觉效果。需要注意的是，一些滤镜效果可能对性能产生影响，因此在使用时需要谨慎考虑，并在需要时提供优雅降级的方案。

自定义属性

引入了自定义属性（Custom Properties），也称为CSS变量，使得开发者可以在CSS中声明和使用变量。 CSS3 自定义属性（Custom Properties），也称为 CSS 变量，是一种允许在 CSS 中定义自己的变量并在样式表中复用的机制。它们以 -- 开头，后面跟着变量名。通过这种方式，你可以更灵活地管理样式中的值，实现更易维护和可重用的样式代码。

以下是一些关于 CSS3 自定义属性的基本用法：

定义变量：

css 复制代码

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

在上述例子中，:root 伪类表示文档根元素，这里是 <html> 元素。在 :root 中定义的变量可以在整个样式表中使用。

使用变量：

css 复制代码

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

在这个例子中，var(--primary-color) 和 var(--font-size) 使用了之前定义的变量，分别表示颜色和字体大小。

动态更新变量：

css 复制代码

:root {
  --primary-color: #3498db;
}

body {
  color: var(--primary-color);
}

body:hover {
  --primary-color: #e74c3c;
}

在这个例子中，当鼠标悬停在 body 元素上时，--primary-color 的值会动态更新，从而改变文本颜色。

继承变量：

css 复制代码

:root {
  --primary-color: #3498db;
}

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

.title {
  color: var(--text-color);
}

在这个例子中，.container 元素中定义了 --text-color 变量，而 .title 元素通过 var(--text-color) 继承了这个变量。

CSS3 自定义属性的使用使得样式表更具灵活性和可维护性，特别是在需要共享颜色、字体大小等常见值的情况下。

css3中常用到的特性

box-sizing

Flexbox（弹性盒子布局）

flex-basis和width有什么区别

同时设置flex-basis 和 width 产生什么效果

骰子布局

Grid（网格布局）

过渡和动画

transform：2D 转换和 3D 转换

@keyframes

transition过渡

多列布局

选择器的增强

背景和边框的增强

媒体查询

响应式和自适应的区别

响应式设计（Responsive Design）：

自适应设计（Adaptive Design）：

综合：

滤镜效果

自定义属性

定义变量：

使用变量：

动态更新变量：

继承变量：

`box-sizing`

`flex-basis`和`width`有什么区别

同时设置`flex-basis` 和 `width` 产生什么效果

`transform`：2D 转换和 3D 转换

`@keyframes`

`transition`过渡