-
浏览器渲染引擎与阻塞
浏览器渲染引擎与阻塞一、浏览器渲染引擎主要模块 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块 HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。 C... -
浏览器相关原理详细总结一
浏览器相关原理详细总结一Chrome 打开一个页面需要启动多少进程？分别有哪些进程？浏览器从关闭状态进行启动，然后新开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个进程；后续再新开标... -
浏览器的组成与功能
浏览器的组成与功能浏览器的内核(渲染引擎)浏览器中有一个最重要的模块，它主要的作用把一切请求回来的资源变为可视化的图像。 这个模块就是浏览器内核，通常它也被称为渲染引擎。 浏览器内核总结： IE———->Trident Safari——... -
缓存机制
一、缓存理解1.缓存定义: 浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据。 2.缓存的好处: 减少请求的个数； 节省带宽，避免浪费不必要的网络资源； 减轻... -
本地存储
HTML5的本地存储HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使... -
大纲
IP IP头：IP 数据包开头的信息，包含 IP 版本、源 IP 地址、目标 IP 地址、生存时间 UDP（user datagram protocol）用户数据包协议 TCP（transmission control protocol）传输控制... -
css常用奇淫技巧(不定期更新)
一、常用技巧清除浮动 添加新的元素 、应用 clear：both; 父级定义 overflow: auto; 父元素也设置浮动; 使用br标签和其自身的html属性:《br clear=”all”/》 clear=”... -
JavaScript封装XMLHttpRequest请求
什么是 XMLHttpRequest 对象XMLHttpRequest 对象用于在后台与服务器交换数据。XMLHttpRequest 对象是开发者的梦想，因为您能够： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加... -
Ajax跨域的几种解决方案
在这个前后端分离越来越流行的时代，跨域请求对于我们来说已经非常常见了。关于跨域，有N种类型，本文只专注于ajax请求跨域。 何为跨域请求 ... -
sessionStorage和localStorage解释及区别
HTML5的本地存储HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使...
$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
}
}
}
}
}