css知识总结浏览器渲染原理首先，浏览器会根据所编写的html和css构建html树（DOM）和css树（CSSOM）

浏览器渲染原理

首先，浏览器会根据所编写的html和css构建html树（DOM）和css树（CSSOM），同时将两棵树合成一棵渲染树（render tree），在渲染树的基础上首先进行Layout（布局），计算并设计出各部分内容的文档流、盒模型、大小和位置等信息，再通过Paint（绘制），把边框的颜色、文字的颜色信息渲染，最后在compose（合成），即将前面所渲染出的信息整体合成在一起形成一个成型的网页。

css的话的两种做法

1.transition

transition是过渡的意思，即标签从一种状态变化到另一种状态，它往往运用于简单的动画制作中，可以给它加上时长、过渡方式、延迟等属性值。例如：

transition:all 1s linear 1s;

一般transition属性会结合transform属性进行动画的制作。如下面的红心动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .heart {
        padding: 80px;
        position: relative;
        height: 400px;
        transition: all 1s;
        padding: 200px;
      }
      .heart:hover {
        transform: scale(1.2);
      }

      .heart .left {
        height: 100px;
        width: 100px;
        float: left;
        position: absolute;
        transform: rotate(45deg) translateX(-50%);
        border-radius: 50% 0 0 50%;
        background-color: red;
      }

      .heart .right {
        height: 100px;
        width: 100px;
        float: left;
        position: absolute;
        transform: rotate(45deg) translateY(-50%);
        border-radius: 50% 50% 0 0;
        background-color: red;
      }

      .heart .bottom {
        height: 100px;
        width: 100px;
        float: left;
        position: absolute;
        transform: rotate(45deg);
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="heart clearfix">
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>
  </body>
</html>

2.animation

animation属性主要是通过确定出关键帧的变化来实现动画的制作，它可以加的属性值包括，关键帧名称、时长、过渡方式、延迟、次数、方向。可以通过以下红心来体现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .heart {
        display: inline-block;
        animation: xxx 0.5s linear infinite;
        position: relative;
        padding: 100px;
      }
      @keyframes xxx {
        0% {
          transform: none;
        }
        100% {
          transform: scale(1.3);
        }
      }
      .heart .left {
        width: 40px;
        height: 40px;
        float: left;
        position: absolute;
        transform: rotate(45deg) translateX(-20px);
        border-radius: 50% 0 0 50%;
        background-color: red;
      }
      .heart .right {
        width: 40px;
        height: 40px;
        float: left;
        position: absolute;
        transform: rotate(-45deg) translateX(20px);
        border-radius: 0 50% 50% 0;
        background-color: red;
      }

      .heart .bottom {
        width: 40px;
        height: 40px;
        float: left;
        position: absolute;
        transform: rotate(-45deg);
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="heart">
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>
  </body>
</html>