A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 学习体会

© 增增的小棉袄 初级黑马   /  2018-11-28 14:49  /  662 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

    人的一生,如同草木,春萌秋萎。走过这一程,我们经历的太多,能够于心铭记的,却只有那么微小的一部分。
    下面我就CSS中那微小的精灵技术进行简单的小结:
  一、 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
      我们需要使用CSS的:
- background-image、
- background-repeat
- background-position属性进行背景定位,
- 其中最关键的是使用background-position 属性精确地定位
   
css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

1. 精确测量,每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时, 背景定位基本都是 负值。

二、聊聊如何在浮动中居中
        浮动居中
float只有left和right,没有center。 可以如下设置居中

div {
    margin-left: auto;
    margin-right: auto;
}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马