-
ES6-Iterator
1、Iterator一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。 原生具备 Iterator 接口的数据结构如下：(==for…of可以遍历具备iterator的结构... -
ES6-Promise的方法比较
1.Promise.all()Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 1const p = Promise.all([p1, p2, p3]); 只有p1、p2、p3的状态都变成... -
ES6-Object的新增方法
1、新增方法1.1.Object.is();等价于严格相等（===） 12345+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) // falseObjec... -
浏览器兼容性问题
1、样式兼容 css 因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式。 1* { margin: 0; padding... -
水平垂直居中的几种方式
公共代码： 12345678910111213141516171819202122/* 公共代码 */<style>.wp { border: 1px solid red; width: 300px; he... -
圣杯和双飞翼布局
布局效果 控制盒模型的属性：box-sizing... -
1px的问题
一、前言像素：是组成图片的色彩和亮度的最小图像单元，是显示屏的画面上能表现出来的最小单位。 分辨率屏幕分辨率是指纵横向上的像素点数，单位是px。 两个大小尺寸相同的屏幕而言： 当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单... -
排序算法
排序算法排序算法有很多：冒泡排序/选择排序/插入排序/归并排序/计数排序( counting sort)/基数排序(radix sort)/希尔排序/堆排序/桶排序...
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color-1)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}