CSS 扩展内容

字体图标（解决精灵图的缺点）

1.轻量级
2.灵活性
3.兼容性（几乎支持所有的浏览器）

注意不能代替精灵技术，比如复杂的图片还是用精灵图做

• 下载

1. icomoon（国外服务器）https://icomoon.io/
2. iconfont阿里字体库

• 引入
  把下载的fonts 放到项目根目录
  通过css的方式引入

  
  image.png

css 三角制作

当 div 盒子width,hight 都是0px 时，设置4条边的颜色即可（可以把其他三边设置透明）

image.png

css用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

1. 更改用户的鼠标样式
   2.表单轮廓
   3.防止表单域拖拽

   
   image.png

image.png image.png

vertical-align属性（图片和文字垂直居中，和行内块或者行内元素搭配使用）

image.png

解决图片底侧空白缝隙

image.png

溢出的文字省略号显示

image.png image.png
image.png
image.png

此处更推荐后台人员做这个效果，因为后台人员可以设置显示多少字，操作更简单

页面布局技巧

巧妙利用一个技术更好更快的布局：
1.margin负值的运用

image.png image.png image.png image.png

相对定位会压住其他的盒子

2.文字围绕浮动元素

image.png
image.png