CSS中动画和过渡的区别

css中动画和和过渡都是用于在网页上创建动态效果的技术但是它们有着不同的用途和实现方式。下面是两者的区别和各自的特点。

过渡（Transitions）

CSS过渡允许在元素从一种方式转换为另一种方式逐渐改变元素的属性。多用于简单的属性变化

特点

触发方式：依赖用户的交互（点击、滑动等）或状态变化
简洁性：适用于简单的状态切换
控制属性：可以控制哪些属性参与过渡，过渡持续的时间、过渡的效果等。

动画（Animation）

特点

复杂性：适用于需要多个状态变化的复杂动画。
独立性：动画可以在没有用户交互的情况下自动运行。
控制属性：可以使用关键帧（keyframes）定义动画的每个阶段，精细控制动画效果。

水平垂直居中

absolute + margin:auto

.outer{
    position:reactive;
}
.inner{
    position:absolote;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

absolute + 负margin
使用这种方式需要确定内部元素的宽高才能使用

.outer{
    position:reactive;
}
.inner{
    position:absolote;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-right:-50px
}

absolute+calc
这种方式也需要确定元素内部的宽高才能使用

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

absolute + transform

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

flex布局

.outer {
  display: flex;
  justify-content: center; //水平居中
  align-items: center; //垂直居中
}

grid布局

.outer {
  display: grid;
}
.inner {
  justify-self: center; //水平居中 
  align-self: center; //垂直居中 
}

使用CSS绘制一个三角形

使用border绘制三角形
例如绘制一个向上的三角形

. border {
     width: 0;//设置宽高为0px
     height: 0;
     border-style:solid;//设置border的线条为实线
     border-width: 0 50px 50px;//设置上方的边框为0，仅仅设置左右下的边框
     border-color: transparent transparent red;//设置左右的边框为透明仅设置下方的边框颜色
 }

使用clip-path绘制三角形
使用css自带的裁切工具对边框进行裁剪,依旧是绘制一个向上的三角形

.clip-triangle-up { 
    width: 100px; //设置三角形的底
    height: 100px; //设置三角形的高
    background-color: red; //设置三角形的颜色
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); //设置裁剪的坐标，即三角形的三个点的位置
}

使用伪类绘制三角形
这种方法的本质还是使用border来进行实现，它的优点就是不会影响原有的元素

.triangle-container { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    background-color: lightgrey; //通过对原有的元素进行标记用于区分
}
.triangle-container::before { 
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); //调整位置
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 50px solid red; 
}

标准盒模型和怪异盒模型

CSS中Box model是分为两种: W3C标准和 IE标准盒子模型。当不对doctype进行定义时，会触发怪异模式。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

两种模型的互相转化

box-sizing ： content-box || border-box || inherit;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

CSS选择器

使用*选择器 ：这种选择器默认选择所有的元素
元素选择器 ：直接选择元素的标签，所有的元素标签都会被选中 body{}
类选择器：选择相同类名的元素.className{}
ID选择器：选择符合ID名的元素#ID{}
属性选择器：选择元素内部包含相应属性的元素a[herf]{}或者a[herf* = 'aaaa']//选择所有a标签中herf属性中包含aaaa的元素
分组选择器:选择相应组合的元素span,a {}就是选择所有的a和span标签
后代选择器：选择元素的相应后代元素div p{} 中间用空格
直接子代选择器：选择直接的子代元素，两个元素中间包含其他的元素不算div>p{}
一般兄弟选择器：表示的是在同一父元素的情况下，某一元素后的所有相应元素>div~span {}
紧邻兄弟选择器：表示的是在同一父元素的情况下，某一元素后的第一个相应元素div+ span{}
伪类选择器：这组选择器包含了伪类，用来样式化一个元素的特定状态。a:hover { }

选择器的优先级

一般认为选择器选择的范围越小权重越大，依次进行计算即可内联 > ID选择器 > 类选择器 > 标签选择器,如果使用！import的话会将元素的优先级提到最高，可以使用外部样式覆盖到内联样式

文字超出之后显示省略号

单行文本

.ellipsis { 
    width: 200px; /设置容器的宽度 
    white-space: nowrap; // 禁止文本换行 
    overflow: hidden; // 隐藏超出容器的部分 
    text-overflow: ellipsis; // 使用省略号表示超出部分 
    border: 1px solid black; //添加边框方便查看效果 
}

多行文本

.multiline-ellipsis { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3; //设置显示的行数 
    overflow: hidden; width: 200px; //设置容器的宽度 
    border: 1px solid black; //添加边框方便查看效果 
}

定位方式

static

默认值。元素按照正常的文档流进行定位，不受top、right、bottom和left属性的影响。

relative

元素相对于其正常位置进行定位，可以使用top、right、bottom和left属性对其进行偏移。其他元素仍然按照文档流正常排列。

absolute

元素相对于最近的已定位祖先元素（不为static的元素）进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是html元素）进行定位。元素会脱离文档流，不会影响其他元素的布局。

fixed

元素相对于浏览器窗口进行定位，即使页面滚动，它也保持在相对位置不变。元素脱离文档流，不影响其他元素的布局。

sticky

元素根据用户的滚动位置进行定位。它在relative和fixed定位之间切换。当用户滚动到特定位置时，元素变为固定定位。需要配合top、right、bottom或left属性来指定粘性定位的阈值。

定位理解

<div style="position: relative;">
    <div style="position: absolute;top: 100px;left:100px;">
      <div style="position: fixed;top: 100px;left:100px;"></div>
    </div>
  </div>

内部的 fixed 布局不会受到外部元素影响，直接设置按照整个屏幕的布局进行位移

<div style="position: relative;">
    <div style="position: absolute;top: 100px;left:100px;">
      <div style="position: absolute;top: 100px;left:100px;"></div>
    </div>
  </div>

内部的absoloute会根据外层的元素进行位移

CSS单位

px

px是显示器屏幕上的一个小点，表示的是一个绝对长度的单位，优点就是宽高可控，但是再高分辨率上的屏幕表示会显示的比较小，所以px的像素大小和其他的属性无关

em

表示的是相对长度的单位，相对于当前度一箱的文本字体尺寸。如果相对于行内文本字体的尺寸未被人使用，那么就会向上层查找文本字体，默认字体的尺寸表示为（1em = 16px）

em的值并不是固定的
em 会继承父级元素的字体大小
em 是相对长度的单位，相对于当前对象的文本字体尺寸，如果对于字体的尺寸没有被人设置，那么就相对于浏览器的默认字体尺寸，默认是16px

rem

rem，相对单位，相对于html的根元素font-size的值。可以对根元素的font-size的修改，进行元素的宽高进行修改

em和rem不同的是相对于根元素，而不像em使用级联元素来计算尺寸

vh、vw

使用vw、就是根据窗口的宽度，分成100等份，同理vh表示的是窗口的高度

再桌面端表示的是浏览器的可视区域
移动端是指布局视口
vh和vw比较容易混淆的是%，百分比布局讲的是相对于父元素，对于普通元素理解的是相对于父元素，对于绝对布局%表示的是根据已定位的父元素，对于粘性布局表示的是相对于可是窗口

css隐藏元素的方法

display:none

设置之后元素将直接从页面上彻底消失，会直接引发浏览器的重排和重绘，元素不可见，事件无法响应

visibility：hidden

从页面上直接隐藏了但是DOM的结果会直接存在只是当前是一个不可见的存在，不会触发元素的重新排版，但是会触发浏览器的重绘，元素不可见，占据页面的位置，事件不可以触发

opacity：0

这个是元素的透明度为0，元素还会在页面中占据位置，但事件还是可以直接触发，不会触发元素的重新排版，但是会触发浏览器的重绘

设置元素的width和height为0

使用这种方式会导致元素内部的子元素显示，可以使用overfilow:hidden 因为宽高已经成为了0，所以无法响应事件

position：absolute

直接将元素移动到可视区域，元素不可见同时无法响应点击事件

如何理解元素的回流和重绘

回流：回流是指当网页的布局需要更新时，浏览器需要重新计算元素的几何属性（例如，位置和尺寸）。当页面中的元素发生变化并影响其他元素的布局时，会触发回流。
重绘：重绘是指当元素的外观改变，但不影响其布局时，浏览器会更新元素的绘制。重绘涉及到视觉上的更新，例如颜色、背景、边框等。

浏览器的渲染机制

解析HTML，生成DOM树。解析CSS，生成CSS树
将CSS树和DOM树结合，生成渲染树
根据生成的渲染树进行回流，获得元素的集合信息，位置或者大小等
根据渲染树以及回流信息得到元素的绝对像素
将像素发给GPU展示到页面上避免回流，应当尽量减少对于外部元素的修改，尽量指定内部元素进行修改

CSS与HTML