异步:

同步是像排队一样,只有前一个任务执行完,才能执行下一个。而异步就是打乱这种顺序,当前一个任务宕机了,被挂起了,可以跳过它,接着往下执行。或者干脆将可能会失败或卡住的这种任务放到最后执行。这就叫做异步

阅读更多

Vue3 和 vue2 的不同?

  • Vue3 的不同之一在于数据获取。Vue3 中的反应数据(Reactive Data)是包含在一个反应状态(Reactive State)变量中,我们需要访问这个反应状态来获取数据值。
  • Vue2 使用选项类型 APIOptions API)对比 Vue3合成型 APIComposition API
    • 旧的选项型 API 在代码里分割了不同的属性(properties):datacomputed属性,methods,等等。
    • 新的合成型 API 能让我们用方法(function)来分割,相比于旧的 API 使用属性来分组,这样代码会更加简便和整洁。

阅读更多

伪类与伪元素

伪类

伪类包含两种:状态伪类(UI 伪类)和结构性伪类

阅读更多

概述

访问网页的设备有着不同的屏幕尺寸分辨率处理能力

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。

实现这一切的核心要素是:媒体查询(Media Query)。

阅读更多

Web 可访问性/应用无障碍

H5 新标签–标签语义化

HTML5 添加了诸如mainheaderfooternavarticlesection等新标签,它们为开发人员提供更多的选择和辅助特性。(能够辅助屏幕阅读器工作)

阅读更多

颜色渐变

  • 背景色并不局限于单色,CSS 还提供了颜色过渡,也就是渐变
  • background里使用linear-gradient()来实现线性渐变
  • 下面是它的语法:
1
background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);
  • 第一个参数指定了颜色过渡的方向 - 它的值是角度,90deg 代表垂直渐变,45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序:

举个栗子:

1
2
3
4
5
6
7
div {
border-radius: 20px;
width: 80%;
height: 100px;
margin: 50px auto;
background: linear-gradient(35deg, #ccffff, #ffcccc, rgb(204, 204, 255));
}

效果如下
图片

线性渐变条纹

  • repeating-linear-gradient()函数和linear-gradient()很像,主要区别是repeating-linear-gradient()重复指定的渐变。
  • repeating-linear-gradient()有很多参数,此处只介绍角度值起止渐变颜色值
  • 角度就是渐变的方向起止渐变颜色值代表渐变颜色及其宽度值,由颜色值和起止位置组成,起止位置用百分比或者像素值表示。

举个栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
iv {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}

图片

  • 渐变开始于 0 像素位置的yellow,然后过渡到距离开始位置 40 像素的yellow
  • 由于下一个起止渐变颜色值的起止位置也是 40 像素,所以颜色直接渐变成第三个颜色值black,然后过渡到距离开始位置 80 像素的red
  • 理解它是如何过渡的–
  • 0px [黄色 -- 过渡 -- 黄色] 40px [黑色 -- 过渡 -- 黑色] 80px
  • 如果每对起止渐变颜色值的颜色都是相同的,由于是在两个相同的颜色间过渡,那么中间的过渡色也为同色,接着就是同色的过渡色和下一个起止颜色,最终产生的效果就是条纹
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×