CSS-高级技巧

精灵图

精灵技术：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.精灵图的使用

---

字体图标

1.字体图标的产生和优点

2.字体图标的下载

icomoon字库    Icon Font & SVG Icon Sets ❍ IcoMoon   

阿里iconfont字库    iconfont-阿里巴巴矢量图标库

3.字体图标的引入

>扩展 文件字体格式

 4.字体图标的追加

---

CSS三角

->

由上可知，只需将其余三条边的边框改成透明色，其他不变，即可做成三角形

->

---

 CSS用户界面样式

 1.更改用户的鼠标样式 cursor

 

2.取消表单轮廓 outline

 

 3.防止拖拽文本域 resize

---

 vertical-align属性应用

 1.图片、表单和文字对齐

2.解决图片底部默认空白缝隙问题

空白缝隙存在：若有文字就能看得更清楚（是基线和底线距离的空白）

---

溢出文字省略号显示

1.单行文本溢出省略号

2.多行文本溢出省略号

---

 常见布局技巧

 1.margin负值的应用

 2.文字围绕浮动元素

3.行内块巧妙运用

4.CSS三角的强化应用

---

CSS初始化

/* 把我们所有标签的内外边距清零 */
*{
    margin:0;
    padding:0;
}
/* i和em斜体的文字不倾斜 */
i,
em{
    font-style: normal;
}
/* 去掉li的小圆点 */
li{
    list-style: none;
}
img{
    /* border:0 是为了照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
    border:0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}
button{
    /* 当我们鼠标经过button按钮时，鼠标变为小手*/
    cursor: pointer;
}
a{
    color: #666;
    text-decoration: none;
}

---