CSS笔记（七） 精灵图和一些小特性
1、元素显示与隐藏：让一个元素从页面上消失，但不在文档源码中删除。
常见：display、visibility、overflow
（1）display：转换元素属性block、inline-block / 显示block或者隐藏none，隐藏之后不保留位置；
（2）visibility：inhert继承父亲；visible显示；hidden隐藏，保留原有位置；
（3）overflow(对溢出处理)：visible可见的、auto自动的、hidden溢出隐藏、scroll总是滚动条
2、鼠标样式cursor：pointer；
pointer小手、text一个i（大写）子类型的样式、move四个十字架小箭头、default小白箭头；
3、轮廓线outline：none
input输入框会有一个默认的蓝色轮廓线
取消轮廓线：input{
outline：none；
border：1px solid red; //每个浏览器的默认边框不同，最好设置一样的
}
4、防止文本域拖拽 resize：
textarea{
resize: none;
}
5、垂直对齐vertical-align：（对块级元素没有效果，针对行内块元素display:inline-block，对文字单独的垂直也不作用，主要用来图片/表单与文字对齐）
问题：基线对齐，图片和文字对齐，图片下面会有个空白行，加入文字有单词my，y字母的小尾巴比较长，图片和m字母对齐了。
解决：给img添加属性img{vertical-align:top; border:0去掉蓝色边框 / display:block;一行无对齐问题}
6、溢出文字隐藏：
white-space，设置或检索对象内文本显示方式，通常用于强制一行显示内容。
{ white-space： nowrap 强制在同一行内显示所有文本，知道文本结束或有dr标签才换行
overflow：hidden； （比如新闻页面的标题）
text-overflow：ellipsis; 溢出的部分用省略号替代
}
7、精灵技术sprite：
为了减少服务器接收和发送请求的次数。CSS精灵图（雪碧图）是一种处理网页背景图像的方式，将一个页面涉及的所有零星背景图像都集中到一张大图中去，将大图应用于网页。
如何在一张大图里面找到需要的下部分：先规定该部分的高宽，然后让这张图片做背景图片，再把图片调到合适的位置：如
h3{ background: url(images/index.png) no-repeat -2px -184px; width: 26px; height: 26px; }
background-position: 0 -10px ; （背景定位实现精灵图）
8、微信导航栏滑动门：导航栏不同的字数可以用，字数多的撑开
a { //a左边放左圆角，但是文字需要往右边走15px
margin: 100px;
height: 33px;
display: inline-block;
background: url(images/to.png) no-repeat;
color: #fff;
text-decoration: none;
line-height: 33px;
padding-left: 15px;
}
span { //span右边放右圆角，但是文字需要往右边走15px
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
<a href="#">
<span>首页</span>
</a>
滑动门例子：微信导航栏
9、web字体
字体格式：不同浏览器支持字体格式不同
（1）TureType(.ttf)
（2）OpenType(.otf)
（3）Web Open Font Format(.woff)
（4）Embedded Open Type(.eot) ie专用
（5）SVG(.svg)
字体图标：本质是字体，比请求图片方便。
网站：icomoon字库、阿里icon font字体、fontello在线定制也可从GitHub下载、Font-Awesome、
使用：（1）如在 icomoon.com下载了字体图标的压缩包，解压把fonts文件夹整个复制到项目中，
（2）在样式里面声明字体，告诉别人我们自己定义的字体
@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-style: normal; /*倾斜字体正常*/
}
（3）给盒子使用字体：
span{ font-family: "icomoon"; }
（4）盒子里面添加结构：
span :: before{ content: "\e900"; } 或者 <span>xx</span>
（也可自己设计，用AI设计svg格式的icon）
追加新的字体图标：把原来的.json文件导入网站，再去追加。
