《CSS 知识总结》

劉学渣
67 阅读8分钟

浏览器渲染原理：

✨查看浏览器渲染:

开发者工具，选中任意一个tab,按esc键,勾选Paint flashing。刷新页面，绿色出现的次数，就是浏览器渲染的次数

浏览器渲染过程

  • 根据HTML构建HTML树(DOM)

浏览器会遵守一套步骤将HTML 文件转换为 DOM 树。浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。将字符串转换成Token，例如：<html>、<body>等。Token中会标识出当前Token是“开始标签”或是“结束标签”亦或是“文本”等信息。生成节点对象并构建DOM

  • 根据CSS构建CSS树(CSSOM)

DOM会捕获页面的内容，但浏览器还需要知道页面如何展示，所以需要构建CSSOM。

构建CSSOM的过程与构建DOM的过程非常相似，当浏览器接收到一段CSS，浏览器首先要做的是识别出Token，然后构建节点并生成CSSOM。

这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点，也可以通过继承获得。在这一过程中，浏览器得递归 CSSOM 树，然后确定具体的元素到底是什么样式。

  • 将两棵树合并成一颗渲染树

在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none的，那么就不会在渲染树中显示。 在这里插入图片描述

  • Layout布局(文档流，盒模型，计算大小和位置)

当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。

  • Paint绘制(把边框颜色，文字颜色，阴影等画出来)

  • Compose合成(根据层叠关系展示画面)

CSS动画

1.transform完整语法

四个常用功能：

位移 transform:translate
缩放 transform:scale 放大/缩小
旋转 transform:rotate
倾斜 transform:skew

经验

一般都需要配合transition过渡 代码:transition:all 1s;

inline元素不支持transform,需要先变成block

transform:translate位移(常用)

常用写法

translate(<length-percentage>,<length-percentage>?)
translateX(<length-percentage>)
translateY(<length-percentage>)
垂直于视点translateZ(<length>)且父容器 perspective
translate3d(x,y,z)/**/

调试小技巧：在开发者工具中，选中hover 然后改变像素，来调节位置。（按shift+上下可以快速调节）

transform: translateX(xxxpx);/*在x轴方向移动*/
transform: translateY(xxxpx);/*在y轴方向移动*/
transform: translateZ(xxxpx);/*在y轴方向移动，在二维平面无法观察到现象*/

如何实现三维展示：（设置视点）

在父元素上设置 perspective，就可以设置视点。

<body>
<div class="wrapper">
  <div id="demo"></div>
</div>
*****************************************************
#demo:hover{
  transform: translateZ(50px);
}

.wrapper {
  perspective: 1000px; /*视点在距离正中心1000px的位置*/
    /*调整时候会逐渐的靠近视点，出现大小改变的现象*/
  border: 1px solid black;
}

如果是transform: translateX(50%);/*在x轴方向向右移动自己宽度的一半*/

transform: translateX(-50%);/*在x轴方向向左移动自己宽度的一半*/

translate简写：

translateX和ranslateY可以简写成transform: translate(X,Y);

或者 transform: translateX(-50%) translateY(-50%);

transform: translate3d(X,Y,Z);只有定义时3D时候才能看到Z轴。

经验

1.translate(-50%,-50%)可做绝对定位元素的居中

<body>
<div class="wrapper">
  <div id="demo"></div>
  </div>
</body>
******************************************************
.wrapper {
  border: 1px solid black;
  position: relative;/*想绝对定位，父级元素相对定位*/
  height: 500px;
}
#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
   position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  🤡/*可以实现绝对居中*/    
}

可用于场景:loading加载中...

不支持IE 其它都支持

2.要学会看懂MDN的语法示例

transform：右侧属性

transform:scale 缩放

常见写法：

scaleX(<number>)需要配合transition:all 1s;过渡
scaleY(<number>)
scale(<number>,<number>?)

<body>
<div class="wrapper">
  <div id="demo"></div>
  </div>
</body>
*******************************************************
#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
   position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: all 1s; /*产生一个1s钟的动画效果*/ 
}
#demo:hover {
   transform: scale(1.5);/*整体扩大1.5倍*/
}

如果代码是

 transform: scaleX(1.5); /*横向变胖1.5倍*/
  transform: scaleY(1.5);/*纵向变高1.5倍*/
transform: scale(1.5,0.5)/*横向变胖纵向变矮*/

经验

用的较少，因为容易出现模糊

代码：transition:all 1s;过渡  /*0.5s 这种小数可以写成.5s*/
     transform: scale(1.5);


#### **transform:rotate 旋转**

常用写法

```css
rotate([<angle>|<zero>])
rotateX([<angle>|<zero>])/*沿着X旋转，*/
rotateY([<angle>|<zero>])/*沿着Y旋转*/
rotateZ([<angle>|<zero>])
rotate3d太复杂，无法用语言表述

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 50px;
  transition: all 1s;   
}
#demo:hover {
   transform: rotate(45deg);/*默认以垂直平面的轴旋转45℃*/
}

经验

1.一般用于360度旋转制作loading或者按钮的交互

2.用到时再搜索rotate mdn看文档

代码 transform: rotate(45deg);

transform:skew倾斜

常见写法：

skewX([<angle>|<zero>])/*沿着X方向倾斜*/
skewY([<angle>|<zero>])/*沿着Y方向倾斜*/
skew([<angle>|<zero>],[<angle>|<zero>]?)

#demo:hover {
   transform: skew(45deg); /*默认沿X轴，向左倾斜45度*/
}
#demo:hover {
   transform: skew(-45deg); /*向右倾斜45度*/
}

经验

用的较少

用时再搜skew mdn

transform多重效果

✨组合使用

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 100px;
  transition: all 1s;
    font-size: 25px;
}

#demo:hover {
   transform: scale(2) rotate(45deg);/*旋转的过程中变大*/
}

transform:scale(0.5)translate(-100%,-100%);
transform:none;取消所有

画圆知识点：

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* 宽度和高度需要相等 */
}

/* 动画定义 */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* 旋转，渐变色 */
#advanced {
	width: 200px;
	height: 200px;

	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

	animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

2.transition过渡

其它 1.#demo.end 注意不能有空格，表示demo拥有end的时候(#demo .end表示demo后代里面的end) 意思是用css给demo增加一个class="end" 注意要配合js button.onclick=()=>{ demo.classList.add('start') }

作用

补充中间帧，

<body>
<div id="demo"></div>
</body>
**********************************************************
#demo {
  width:  100px;
  height:  100px;
  border: 1px solid red;
  transition: width 1s; /*如果宽度变化了 就增加1s钟的动画*/
}
#demo:hover { /*demo拥有end 的时候*/
  width:  200px;
}

语法

1.transition: 属性名 时长 过渡方式 延迟

  transition:left 200ms|s linear  3s;

过度方式： linear（匀速的）|ease|ease-in（淡入）|ease-out（淡出）|ease-in-out（淡入淡出）|cubic-bezier|step-start|step-end|steps

2.可以用逗号分隔两个不同属性

  transition:left 200ms,top 400ms

3.可以用all代表所有属性

  transition:all 200ms ease-in-out 300ms;//再延迟300ms淡入淡出

注意，并不是所有属性都能过渡

display:none;=>block没法过渡

一般改成visibility:hidden=>visible

消失的方法：

方法一： opacity 但是有bug

在这里插入图片描述 在这里插入图片描述

方法二：visibility 在这里插入图片描述

改变颜色:

img

3.animation动画

动画 animation可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

制作动画分为两步：

  • 先定义动画
  • 再使用（调用）动画

一般来说两步的动画制作可以有两种方法：

1、可以有两次transform制作：

.a=== transform===.b

.b=== transform===.a

使用setTimeout或者监听transitionend事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ArW8sSe-1648216650957)(ttps://raw.githubusercontent.com/lxy9887/Blog-images/main/images/image-20220325204750817.png)]

2、使用animation

声明关键帧，添加动画

过渡必须要有起始 一般只有一次动画,比如hover和非hover状态的过渡 接下来介绍两次动画animation(更高级的过渡效果)

1.动画简写
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名;

时长: 1s

过渡方式: 跟transition一样，如linear

次数： 3或者infinite（无限次）

方向: reverse（反过来）|alternate（交替的）|alternate-reverse （反过来交替）

填充模式: forwards|none|backwards（一开始就把动画第一针复制到原始的位置）|both

是否暂停: paused|running

  • 简写属性里面不包含 animation-play-state
  • 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
  • l想要动画走回来 ，而不是直接跳回来：animation-direction: alternate
  • 盒子动画结束后，停在结束位置： animation-fill-mode : forwards

以上所有属性都有对应的单独属性(都可单独设置)

img

2.使用animation

先声明关键帧@keyframes

<body>
<div class="wrapper">
  <div id="demo"></div>
  <button id="button">开始</button>
</div>
</body>

#demo {
  width:  100px;
  height:  100px;
  border: 1px solid red;
  margin: 50px;
}
@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100% {
    transform: translateX(200px) translateY(100px);
  }
}
#demo.start{ 
  animation: xxx 2s;
    
}

button.onclick = ()=>{
    demo.classList.add('start')
}
3.@keyframes完整语法

标准写法

一种写法是from to

 @keyframes slidein {
  from {
    transform: translateX(0%); 
  }
  to {
    transform: translateX(100%);
  }
}

一种是分步写关键帧：

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
  • 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列
  • 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
avatar
文章
阅读
粉丝