精灵图技术

精灵图( sprites )的使用
使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为 sprites 精灵图 或者 雪碧图。
3.移动背景图片位置，此时可以使用background-position.
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为-般情况下都是往上往左移动，所以数值是负值。

字体图标

字体图标的产生
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont.
字体图标可以为前端工程师提供种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、适明效果、旋转等
兼容性：几乎支持所有的浏览器,请放心使用

字体图标的引入
下载完毕之后,注意原先的文件不要删,后面会用。
1.把下载包里面的fonts文件夹放入页面根目录下
2.在CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。
3. html标签内添加小图标。
示例—iconfont阿里巴巴图标库引入方法

字体图标的追加**
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
从新下载压缩包，并替换原来的文件即可。

CSS三角的做法

网页中常见的三角形可以用CSS来做。
示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="../Web/css/style.css">
  9.     <style>
  10.         .pop {
  11.             position: relative;
  12.             width: 200px;
  13.             height: 550px;
  14.             background-color: #444;
  15.             margin-top: 40px;
  16.             margin-left: 30px;
  17.         }
  19.         span {
  20.             position: absolute;
  21.             top: -10px;
  22.             left: 15px;
  23.             width: 0;
  24.             height: 0;
  25.             border: 5px solid transparent;
  26.             border-bottom-color: #444;
  27.             /* 为了照顾兼容性 */
  28.             line-height: 0;
  29.             font-size: 0;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div class="pop">
  36.         <span></span>
  37.     </div>     
  38. </body>

鼠标样式

语法：
style=”cursor: default;”
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

用户界面

取消表单轮廓

给表单添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框。
语法：input {outline: 0;} 或者 input {outline: none;}

防止文本域拖拽resize

实际开发中，我们文本域右下角是不可以拖拽的。
语法：textarea { resize: none;}

vertical-align实现行内块和文字垂直居中

CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align: baseline | top | middle | bottom

值 描述
baseline 默认。元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐

image.png
示例：

  1. img {
  2.      vertical-align: middle;
  3. }   
  5. <div>
  6.     <img src="../Web/images/zx1.jpg" alt=""> 我是一段没有意义的文字woshiyiduanmeiyouyiyidewenzi
  7. </div>


解决图片底部空白缝隙问题**
bug :图片底侧会有一个空白缝隙 ,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
1.给图片添加vertical-align:middle I topl bottom等。(提倡使用的)
2.把图片转换为块级元素display: block;

溢出的文字省略号显示

1.单行文本溢出显示省略号-必须满足三个条件

  1.         .rap {
  2.             width: 100px;
  3.             height: 80px;
  4.             background-color: #999;
  5.             /* 1.先强制一行内显示文本 */
  6.             white-space: nowrap;(默认 normal 自动换行)
  7.             /* 2.超出的部分隐藏 */
  8.             overflow: hidden;
  9.             /* 3.文字用省略号代替超出的部分 */
  10.             text-overflow: ellipsis;
  11.         }

2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)

  1.         overflow: hidden;
  2.         text-overflow: ellipsis;
  3.         /* 弹性伸缩盒子模型显示 */
  4.         display: -webkit-box;
  5.         /* 限制在一个块元素显示的文本的行数 */
  6.         -webkit-line-clamp: 2;
  7.         /* 设置或检索伸缩盒对象的子元素的排列方式 */
  8.         -webkit-box-orient: vertical;

CSS样式初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset)每个网页都必须首先进行CSS初始化。

以京东为例，CSS初始化代码：

  1. /* 把我们所有标签的内外边距清零 */
  2. * {
  3.     margin: 0;
  4.     padding: 0
  5. }
  6. /* em 和 i 斜体的文字不倾斜 */
  7. em,
  8. i {
  9.     font-style: normal
  10. }
  11. /* 去掉li 的小圆点 */
  12. li {
  13.     list-style: none
  14. }
  16. img {
  17.     /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  18.     border: 0;
  19.     /* 取消图片底侧有空白缝隙的问题 */
  20.     vertical-align: middle
  21. }
  23. button {
  24.     /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  25.     cursor: pointer
  26. }
  28. a {
  29.     color: #666;
  30.     text-decoration: none
  31. }
  33. a:hover {
  34.     color: #c81623
  35. }
  37. button,
  38. input {
  39.     /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  40.     font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
  41. }
  43. body {
  44.     /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  45.     -webkit-font-smoothing: antialiased;
  46.     background-color: #fff;
  47.     font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  48.     color: #666
  49. }
  51. .hide,
  52. .none {
  53.     display: none
  54. }
  55. /* 清除浮动 */
  56. .clearfix:after {
  57.     visibility: hidden;
  58.     clear: both;
  59.     display: block;
  60.     content: ".";
  61.     height: 0
  62. }
  64. .clearfix {
  65.     *zoom: 1
  66. }