css 的拓展技术

css 的拓展技巧

---

1 . 精灵图技术

在网络速度越来越快的今天，我们或许已经早已体会不到网页打开慢，半天都刷不出一个网页的体验，但在2、3G时代，这是很常见的，尤其是在加载图片时，更是能深刻体会到，这也使得如果一个网站的图片如果很多的话，这会使得网站请求服务器的次数增加，降低打开速度，影响客户的使用体验。为了解决这个问题，出现了精灵技术。
精灵技术就是将一些不太重要的小的图片制作成一张精灵图，通过添加背景图片然后移动图片位置，将我们想要的那一部分展示出来，通过精灵图，就实现了多个图标共同使用一张图片，减少图片数量，减少请求次数，加快打开速度。
例：

<style>
  .rtb{
  background:  url(images/icons.png) no-repeat -17px -16px;
  }
</style>

需要特别注意的是，移动的背景图片，所以移动的值都是负值。

---

2 . 滑动门技术

一些导航栏或者是其他元素，我们需要他随着内容文字的多少进行宽度改变，而我们又想让他有些比单纯背景颜色更加好的效果，如：微信首页导航栏的突出和凹陷效果。而这些效果都是有背景图片来实现的，盒子随着文字改变宽度，如果单纯的只是添加背景图片，势必会出现问题。推拉门技术就是为了实现这种效果的。

实现原理：

我们有一张效果的背景图，首先有一个大盒子，大盒子给自身一个padding-left值，添加背景图片，移动位置让背景图片的左侧显示出来。在大盒子中有个子盒子，子盒子的高度和父盒子一样，但不给宽度，让他随着内容被撑开。添加同一张背景图片到子盒子，移动位置让背景图片的右侧显示出来。调整好内容的位置。这样随着内容，子盒子不断变大，但父盒子的背景不变，就如同一个滑动门一样。
例：

<style>
	a{
		display: inline-block;
		height: 34px;
		background:  url(images/icons.png) no-repeat;
		padding-left: 15px;;
	}
	a span {
		display: inline-block;
		height: 34px;
		background:  url(images/icons.png) no-repeat right top;
	}
</style>

---

3 . margin负值妙用

多个块级盒子并列浮动时，我们会发现他们的边框相接到一块了，原本的1像素的边框，合在一起成了2像素，并不美观，在表格中我们也遇到了这个问题，表格中我们可以使用border-collapse: collapse;来解决，但这这里并不适用，这就要用到我们的margin了，我们通过给margin负值，让后一个盒子的边框将上一个盒子的边框压住，这样就可以实现盒子和边框合并一样的效果了。
例：

<style>
	div	{
		float: left;
		width: 100px;
		height: 100px;
		background-color: purple;
		margin-left: -1px;
	}
</style>

---

4 . 三角形的实现

在一些隐藏的盒子跳出时，会发现，盒子边缘有个三角形指向你鼠标停留的那个位置，这个三角形也是一个盒子，我们想要实现他，可以写出一个盒子，给宽度和高度为0.设定边框宽度（看需要的三角形要多大），然后给其中的一个边框设定颜色，当我们需要一个朝下的三角，就给上边框一个想要的颜色，其他三个则设定为透明。这样就得到了一个朝下的三角形。想要其他方向的三角就给需要的那个边框颜色，其他的改为透明就好。
例：

<style>
	.wx div {
  	position: absolute;
  	left: 50%;
  	margin-left: -5px;
  	top: -10px;
  	width: 0;
  	height: 0;
  	border-style: solid;
  	border-width: 5px;
  	border-color: transparent transparent #c40000;
  }
</style>

位置通过定位设定好就可以了。

---

5 . 字体图标

在网页中我们时常能看到一些不是图片但是却也不像文字的图标，如：购物车图标、电脑图标等等。这个都是由字体图标来实现的，字体图标可以自己进行设计上传然后下载使用，在一般情况下，我们都是直接去下载的。
下载地址：

推荐网站： http://icomoon.io

• icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。

得到压缩包之后，我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉，我们后面还有用的。

字体文件已经有了，我们需要引入到我们页面中。

a. 首先把 fonts文件夹放入我们 根目录下 。

b. html标签内里面添加结构

 <span></span>  

c. 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

d. 给盒子使用字体

span {
		font-family: "icomoon";
	}

---

追加字体图标

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

---

拓展@ 常见字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1. TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

1. OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

1. Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

1. Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

1. SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

---

6 . ico图标

1). 使用ico图标

• 首先把favicon.ico 这个图标放到根目录下。

• 再html里面， head 之间 引入 代码。

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2). 制作ico图标

我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。

方法步骤：

• 首先把我们想要的切成图片。

• 要把图片转换为 ico 图标，我们借助于第三方转换网站：
• http://www.bitbug.net/。 比特虫

总结：

代码：  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>     

注意：

1. 是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片
3. 位置是放到 head 标签中间。
4. 后面的type=“image/x-icon” 属性可以省略。
5. 为了兼容性，请将favicon.ico 这个图标放到根目录下。