zoukankan      html  css  js  c++  java
  • cssSprites【2012/07/17】

      说cssSprites之前,先简单说一下什么是http请求。HTTP------超文本输送协议。http 负责web服务器与web浏览器之间的通信,用于从web客户端向服务端发送请求,并从服务器向客户端返回内容(网页)。

      cssSprints 也叫 css 精灵,有人也翻译为 css 雪碧。它是一种网页图片应用处理方式。它允许将一个页面的零星图片包含到一张大图中,访问该页面时减少了http请求       csssprites原理:把网页中一些背景图片整合到一张图片文件中,再利用css的“background-image”"background-repeat""background-position"进行定位。

      csssprites优点:

        1、减少网页的http请求,的大体高了网页的性能。

            2、只需要对一张图片命名,不需要对每一个小元素命名,提高制作效率。

            3、更换风格方便,只需要更改一张或少张图片的颜色或样式,整个页面的风格就改变。

      csssprites缺点:

        1、这张图有大量的空白,加载时会导致浏览器的内存占用上升。

            2、如果要修改一张小图片,整张雪碧图都会被修改,工程大。

            3、有时有些图片会出现在它不该出现的位置。

      csssprites使用技巧:

        1、边切图边整合,不要等到完成切片之后才开始sprite。

            2、把图片放到它要显示的地方的相对的地方。

            3、定位时避免使用bottom或right等,最好使用确切位置定位。

            4、给每个图片足够的空间。

        5、最好不要将需要repeat的图片也整合进去。

      注:对于当前网络流行的速度而言,不高于200KB的单张图片所需载入时间基本差不多,所以不用担心sprite图会延长加载时间。PS:关于cssSprites还有许多的优点与缺点,在用的时候应该权衡。

  • 相关阅读:
    Pytest单元测试框架——Pytest+Allure+Jenkins的应用
    Postman+Newman+Git+Jenkins接口自动化测试
    Pytest单元测试框架——Pytest简介
    unittest单元测试框架
    Postman学习笔记(二)
    CukeTest+Puppeteer的Web自动化测试(二)
    Postman学习笔记(一)
    CukeTest+Puppeteer的Web自动化测试(一)
    Puppeteer笔记(八):Puppeteer执行自定义Javascript方法
    Puppeteer笔记(七):Puppeteer切换浏览器TAB页
  • 原文地址:https://www.cnblogs.com/zhengyingyan/p/3627190.html
Copyright © 2011-2022 走看看