前端学习_css笔记（6）精灵图

前端学习_css笔记（5）

CSS精灵技术（sprite)

​ 当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。精灵技术有效地减少服务器接受和发送请求的次数，提高页面的加载速度

出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

1.精灵技术

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

• background-image
• background-repeat ：no repeat(不平铺)
• background-position属性进行背景精确定位

精灵技术使用

1. 精确测量（ps fw）每个小背景图标的大小和 位置。
2. 给定一个div盒子的大小等于背景图标大小
3. background-position 来指定xy轴坐标
4. 给盒子指定小背景图片时， 背景定位依靠图标左上角xy轴坐标进行定位，xy轴基本是负值（往下走）。
5. 盒子得到图标后，想要移动只需要按照盒子进行margin的移动

2. 滑动门

使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵进行左右定位以及使用两盒子的padding撑开左右宽度, 以便能适应不同字数的导航栏，不设置盒子的宽度。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

 a {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
span {
      padding-right: 16px;
      height: 33px;
      //使得变成行内块
      display: inline-block;
  	//不平铺 从右开始定位
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 撑开的最大距离取决于精灵图中原本图片的极限大小
4. 之所以a包含span就是因为 整个导航都是可以点击的。

3. 拓展

3.1 margin负值之美

1). 负边距+定位：水平垂直居中

利用父级盒子大小的50%， 走父级盒子宽度的一半与自身宽度的反方向一半（负值），实现盒子水平垂直居中。

2). 压住盒子相邻边框

使用 margin:-1px 可以使得浮动的盒子边框重叠而不变粗。

注：当使用margin:-1px重叠边框时 如果使用点击显示颜色边框等特效时会出现被压住的情况。

解决方案：

没有定位的盒子：使用position：relative 使得选中盒子变成相对定位浮最上层。

定位盒子：使用z-index：1;实现层级最高

3.2 CSS三角形之美

使用p标签

1. 对宽度高度为0使用边框
2. 4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
3. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

p {
 	width: 0; 
    height: 0;
	border-style:solid; 
   	border-width:10px;
   border-color:red transparent transparent transparent;
	//transparent为透明 上右下左
 }