CSS之高级技巧

苏稚
67 阅读5分钟

精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称css Sprites、CSS雪碧)。

  • 核心原理∶将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可 以了。

精灵图（sprites）使用

1. 使用精灵图的核心

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

2. 使用精灵图核心总结:

  1. 精灵图主要针对于小的背景图片使用。
  2. 主要借助于背景位置来实现---background-position。
  3. 一般情况下精灵图都是负值。(千万注意网页中的坐标∶x轴右边走是正值，左边走是负值 y轴同理。)

字体图标

(1)字体图标的产生和优点

  • 字体图标使用场景:主要用于显示网页中通用、常用的一些小图标 精灵图是有诸多优点的，但是缺点很明显。

    • 图片文件还是比较大的。
    • 图片本身放大和缩小会失真。
    • 一旦图片制作完毕想要更换非常复杂。

  • 此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标本质属于字体。

（2）字体图标的使用

  1. 字体图标的下载
    • icomoon字体库
    • 阿里iconfont字库（免费）

（3）字体图标的引入

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

image-33.png

（4）字体图标的追加

  • 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中
  • 把压缩包里面的selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

CSS三角

  1. 网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标一张图，你就知道CSS三角是怎么来的了,做法如下︰

image-34.png

  1. 写法

image-35.png

CSS用户界面样式

  • 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
    • 更改用户的鼠标样式
    • 表单轮廓
    • 防止表单域拖拽

1. 鼠标样式cursor

  1. 语法

image-37.png

  1. 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

image-36.png

表单轮廓线outline

  • 给表单添加outline: O;或者outline: none;样式之后，就可以去掉默认的蓝色边框。

image-38.png

防止拖拽文本域

  • 实际开发中，我们文本域右下角是不可以拖拽的。

image-39.png

vertical-align属性应用

应用

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

image-40.png

image-41.png

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

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

溢出的文字省略号显示

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

image-42.png 2. 多行文本溢出显示省略号 * 多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

image-43.png

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

常见布局技巧

（1）margin负值运用

  1. 让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框
  2. 标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index )

（2）文字围绕浮动元素巧妙技巧

  1. 巧妙运用浮动元素不会压住文字的特性

（3）行内块巧妙运用

  1. 行内块的盒子之间的距离恒定的

（4）CSS三角强化

  1. 原理

image-44.png 2. 代码

image-45.png

avatar
文章
阅读
粉丝