1. display 的 block、inline 和 inline-block 的区别（1）block：会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性；（2）inline：元素不会独占一行，设置 width、height 属性无效。可以设置水平方向的 margin 和 padding 属性，不能设 …
css sprite
作者： 吖伟【凹凸实验室】转发链接：https:aotu.ionotes20200325high-performance-miniprogram背景小程序每年双十一时刻迎接着亿级用户量的挑战，细微的体验细节都有可能被无限放大，为此，“极致的页面性能”、“友好的产品体验” 和 “稳定的系统服务” 成为了我们开发团队的最基本执行原则。首页作为小程序的门户，其性能 …
1. link 和 @import 都能导入一个样式文件，它们有什么区别嘛？link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；link 没有兼容性问题，@i …
为什么需要精灵图？一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大 …
哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！志同道合的小伙伴跟我一起学习交流哦！第二阶段 CSS318 CSS精灵技术1 CSS精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户，然而，一个网页 …
#大有学问# #头条创作挑战赛#精灵图作用：可以有效减少服务器接收和发送请求的次数，提高了页面的加载速度。用法：将多个小背景图标整合在一张大的图片中，通过background-position属性移动大图片的位置来显示所需小图标。需要测量的两个数值小图标的宽和高；小图标距离大图片左上角的x轴和y轴的值。（其中x轴是大图片上边框，y轴是大图片的左边框）小贴士： …