1.定位

• Static 静态定位，默认

  • 默认定位方式，元素按照 正常文档流 排列，不受 top、left、right、bottom 影响。

• Relative 相对定位

  • 相对自身原来位置进行偏移，不脱离文档流

• Absolute 绝对定位

  • 脱离文档流，不受其他元素排布

  • 相对于最近的“定位祖先”元素（第一个部位static的祖先元素）进行定位

• Fix 固定定位

  • 脱离文档流，不影响其他元素排布

  • 始终相对于视口（viewport）定位，滚动页面时不会移动

  • 适用于 固定导航栏、返回顶部按钮等固定 UI 元素。

• Sticky 粘性定位

  • 介于 relative 和 fixed 之间，在 某个滚动范围内保持相对定位，超出范围后变为固定定位。如表头固定、侧边导航等

2.Flex布局

3.盒子模型

4.动画

• 过渡动画： 示例：

• 帧动画： 示例：

动画效果函数：

ps：实现点击按钮切换背景图ui

.box {    
    width: 300px;

    height: 200px;

    background-image: url("image1.jpg");

    background-size: cover;

    display: flex;

    align-items: center;

    justify-content: center;

}

.box.active {

    background-image: url("image2.jpg");

}

import React, { useState } from "react";

import "./App.css"; // 引入 CSS 文件

const BackgroundToggle = () => {

  const [isActive, setIsActive] = useState(false);

  const toggleBackground = () => {

    setIsActive(!isActive);

  };

  return (

    <div className={`box ${isActive ? "active" : ""}`} onClick={toggleBackground}>

      <button>切换背景</button>

    </div>

  );

};

export default BackgroundToggle;