/* 定义一个简单的过渡动画，在鼠标悬停时触发 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s, background-color 1s;
}
 
.box:hover {
  width: 200px;
  background-color: red;
}

这段CSS代码定义了一个名为.box的类，它在鼠标悬停时会改变自身的宽度和背景色，并且在这些变化发生时加入了平滑的过渡动画效果。transition属性被用来指定哪些属性应该有过渡效果，以及这些过渡效果的持续时间。在.box:hover伪类中，当鼠标悬停在元素上时，宽度会从100px变为200px，背景色会从蓝色变为红色，并且这个变化会在1秒钟内平滑过渡。

CSS3提供了许多强大的布局特性，以下是其中的七种方法：

1. Flexbox布局

   Flexbox布局提供了一种更灵活的方式来布置、对齐和分配容器内的项目空间，无论这些项目的尺寸如何。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Grid布局

   Grid布局将容器分割成一系列的行和列，使得创建复杂的布局变得更加简单。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

3. 相对定位

   相对定位允许你相对于元素的当前位置移动它。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

4. 绝对定位

   绝对定位则相对于最近的非static定位的祖先元素进行定位。

.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 0;
  right: 0;
}

5. 浮动布局

   浮动布局可以使元素向左或向右移动，直到它的外边缘碰到包含它的容器的边框为止。

.box {
  float: left;
  margin: 5px;
}

6. 表格布局

   表格布局是通过CSS的display: table等属性来模仿HTML表格的行为。

.table {
  display: table;
  width: 100%;
}
 
.row {
  display: table-row;
}
 
.cell {
  display: table-cell;
  padding: 10px;
}

7. 使用Transform进行位置调整

   通过CSS的transform属性，你可以通过应用转换移动元素，而不会影响其他元素的布局。

.box {
  position: relative;
  transform: translate(100px, 50px);
}

这些是CSS3中实现布局的主要方式。每种方式都有其优点和适用场景，开发者可以根据具体需求选择合适的布局方式。

CSS的复合选择器是通过组合不同的基础选择器来创建的，以便更精确地选择目标元素。复合选择器包括：

1. 交集选择器（例如：p.warning 选择所有 class 为 warning 的 <p> 元素）
2. 并集选择器（例如：h1, h2 选择所有 <h1> 和 <h2> 元素）
3. 后代选择器（例如：div a 选择 <div> 元素内的所有 <a> 元素）
4. 子选择器（例如：div > p 选择直接子元素 <p> 的 <div> 元素）
5. 相邻兄弟选择器（例如：h1 + p 选择紧跟在 <h1> 之后的 <p> 元素）
6. 通用兄弟选择器（例如：h1 ~ p 选择 <h1> 之后所有的 <p> 兄弟元素）

实例代码：

/* 交集选择器 */
p.error { color: red; }
 
/* 并集选择器 */
h1, h2 {
  color: blue;
  margin-bottom: 0;
}
 
/* 后代选择器 */
div a {
  text-decoration: underline;
}
 
/* 子选择器 */
div > p {
  font-weight: bold;
}
 
/* 相邻兄弟选择器 */
h1 + p {
  color: green;
}
 
/* 通用兄弟选择器 */
h1 ~ p {
  font-size: 80%;
}

这段CSS代码展示了如何使用不同的复合选择器来选择和样式化不同的HTML元素。

在CSS中，可以使用line-height属性来设置行间距，即行与行之间的垂直距离。line-height可以接受不同类型的值，如像素(px)、百分比(%)、无单位的数字或者相对单位(如em或rem)。

以下是几种设置行间距的方法：

1. 使用像素(px)设置行间距：

p {
  line-height: 20px;
}

2. 使用百分比(%)设置行间距，这是相对于当前字体大小的：

p {
  line-height: 150%;
}

3. 使用无单位的数字，这也是相对于当前字体大小的：

p {
  line-height: 1.5;
}

4. 使用相对单位(如em或rem)设置行间距：

p {
  line-height: 1.5em;
}

在HTML中使用相应的标签，如<p>标签，行间距就会生效。例如：

<p>这是一段文本，其行间距已通过CSS设置。</p>

/* 设置一个容器使用伸缩布局 */
.container {
  display: flex; /* 设置为伸缩容器 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: flex-start; /* 项目沿主轴起始端对齐 */
  align-items: center; /* 项目沿交叉轴居中对齐 */
  height: 100px; /* 设置容器高度 */
  background-color: #f0f0f0; /* 设置背景色 */
}
 
/* 设置伸缩项目 */
.item {
  flex: 1; /* 项目占据等分的空间 */
  margin: 8px; /* 项目之间的间隔 */
  text-align: center; /* 文字居中对齐 */
}
 
/* 设置特定项目的样式 */
.item:first-child {
  flex-grow: 2; /* 第一个项目的放大比例是其他项目的两倍 */
  background-color: #ffcccc; /* 设置背景色 */
}
 
.item:last-child {
  flex-basis: 150px; /* 最后一个项目的基准宽度 */
  background-color: #ccffcc; /* 设置背景色 */
}

这段代码展示了如何使用CSS的伸缩布局（flexbox）来创建一个简单的水平排列的容器，其中包含三个伸缩项目。第一个项目比其他项目大两倍，最后一个项目有一个固定宽度。这是一个很好的入门级示例，展示了伸缩布局的基本属性和概念。

flex: 1; 是CSS的一个简写属性，它等同于设置 flex-grow, flex-shrink, flex-basis 这三个属性。

• flex-grow 属性定义了flex项目的放大比例，默认为0，即即使容器有多余的空间，也不会放大。
• flex-shrink 属性定义了flex项目的缩小比例，默认为1，即如果空间不足，flex项目会缩小。
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

当你设置 flex: 1; 时，所有这三个属性的值都被设置为1，表示该flex项目会占据等量的空间，并且在空间不足时会等比缩小。

示例代码：

HTML:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.container {
  display: flex;
}
 
.item1 {
  flex: 1;
  background-color: lightblue;
}
 
.item2 {
  flex: 2;
  background-color: lightgreen;
}
 
.item3 {
  flex: 1;
  background-color: lightcoral;
}

在这个例子中，.item1 和 .item3 将会占据相同的空间，因为他们的 flex-grow 值都是1，而 .item2 将占据的空间是其他两项的两倍，因为它的 flex-grow 值是2。在空间不足时，所有项目会按照 flex-shrink 值等比缩小自身空间。

要使用CSS实现打字机效果，可以通过关键帧动画来逐步显示文本。以下是一个简单的实现示例：

HTML:

<div class="typewriter">这是一个打字机效果的文本。</div>

CSS:

.typewriter {
  overflow: hidden; /* 确保文本不会超出容器 */
  white-space: nowrap; /* 防止文本换行 */
  border-right: .15em solid orange; /* 打字机效果的光标动画 */
  font-size: 20px;
  width: 100%;
  animation: type 3s steps(20), blink .5s step-end infinite;
}
 
/* 文本打字动画 */
@keyframes type {
  from { width: 0; }
  to { width: 100%; }
}
 
/* 打字机光标闪烁动画 */
@keyframes blink {
  to { border-color: transparent; }
}

这段代码会创建一个打字机效果的文本。steps(20) 函数将动画分解为20个步骤，从而使得打字机效果更加平滑。光标的闪烁是通过改变border-color实现的，使用step-end使得光标的闪烁是突出性的，而不是平滑的渐变。动画会无限循环。

CSS是网页样式设计的语言，新特性的学习和掌握对于提升开发者技能至关重要。以下是2023年应知应会的一些CSS新特性：

1. CSS Clipper

.clipped {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

2. CSS Exclusions

.excluded {
  flow-root: flow-root(grid);
}

3. CSS Layout

.container {
  display: layout(grid);
}

4. CSS Marquee

.marquee {
  motion-path: path("M0,0 L100%,0");
  motion-offset: 0%;
  motion-rotation: auto 0deg;
}

5. CSS Masking

.masked {
  -webkit-mask-image: url(mask.png);
}

6. CSS Nesting

.container :is(h1, h2, h3) {
  color: blue;
}

7. CSS Properties and Values API

CSS.registerProperty({
  name: "--custom-property",
  syntax: "<number>",
  inherits: false,
  initialValue: 0
});

8. CSS Shapes

.shape {
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

9. CSS Subgrid

.subgrid-item {
  display: subgrid;
}

10. CSS Typed Object Model

getComputedStyle(element).accumulate(true);

11. Forced Colors

.forced {
  forced-color-adjust: none;
}

12. Grid Extent Sizing

.grid {
  grid-template-rows: [start] 1fr [end];
}

13. Image Rendering

img {
  image-rendering: pixelated;
}

14. Logical Properties

.box {
  border-inline-start-width: 2px;
}

15. MathML Accessibility

math {
  speech: "math speech";
}

16. New Properties and Values

.box {
  aspect-ratio: 16 / 9;
}

17. Paint API

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("bitmaprenderer");
const img = new Image();
img.src = "image.png";
img.onload = () => {
  ctx.transferFromImageBitmap(img);
};

18. Pointer Events

.nopointer {
  pointer-events: none;
}

19. Regions

.region {
  flow-into: "region-name";
}

20. Resize Observer

new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log(`Element's size: width = ${cr.width}, height = ${cr.height}`

import React from 'react';
import styled from 'styled-components';
 
// 创建带样式的按钮组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
`;
 
// 高阶组件，用于处理点击事件
const withClickHandler = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('按钮被点击');
      // 这里可以添加点击后的处理逻辑
    }
 
    render() {
      const props = { ...this.props, handleClick: this.handleClick };
      return <WrappedComponent {...props} />;
    }
  };
};
 
// 使用高阶组件和样式化组件
const ButtonWithClickHandler = withClickHandler(StyledButton);
 
export default () => <ButtonWithClickHandler onClick={() => console.log('点击事件触发')}>点我</ButtonWithClickHandler>;

这个例子展示了如何结合使用高阶组件和CSS-in-JS库（例如styled-components）来创建一个带有点击事件处理逻辑的按钮组件。withClickHandler是一个高阶组件，它封装了点击事件的处理逻辑，而StyledButton是一个使用styled-components定义样式的按钮组件。最后，我们导出了一个结合了两者的ButtonWithClickHandler组件，可以直接在应用中使用。

CSS 动画效果可以通过 @keyframes 规则创建。以下是一个简单的例子，演示了如何创建一个简单的淡入淡出动画效果：

/* 定义关键帧 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
 
/* 应用动画到元素 */
.element {
  animation: fadeInOut 2s infinite; /* 持续时间，次数，效果，填充模式，是否暂停等 */
}

在 HTML 中使用：

<div class="element">这是一个淡入淡出动画效果的文本</div>

这段代码定义了一个名为 fadeInOut 的关键帧动画，它将元素从完全透明且下方 20px 的位置开始，到完全不透明且位于正常位置结束，然后再渐变回完全透明且上方 20px 的位置。这个动画会无限次数地循环。