1. 精灵图 Sprites

# 1. 精灵图 Sprites

# 1.1 为什么需要精灵图

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

# 1.2 使用精灵图Sprites

  • 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中
  • 这个大图片称为 Sprites、精灵图、雪碧图
  • 移动背景图片位置,此时可以使用background-position
  • 移动的距离就是这个目标图片的x和y坐标 (第四象限)
  • 一般情况下都是往上往左移动,所以数值都是负值
  • 使用精灵图时需要精确测量,每个小背景图片的大小和位置

# 1.3 示例

width: 100px; /*测量盒子大小*/
height: 112px; 
backgroud: url(images/index.png) no-repeat -327px -142px; /*测量盒子位置*/

# 2.字体图标 iconfont

# 2.1 为什么需要字体图标

使用场景:主要用于显示网页中通用、常用的一些小图标

  • 精灵图的缺点:
  1. 图片文件比较大
  2. 图片本身放大和缩小会失真
  3. 一旦图片制作完毕想要更换非常复杂

字体图标可以为前端工程师提供一种方便高效的图标使用方式,==展示的是图标,本质属于字体==。

  • 字体图标的优点
  1. 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
  2. 灵活性:本质其实是文字,可以随意改变颜色、产生阴影、透明效果、旋转等
  3. 兼容性:几乎支持所有的浏览器
  • 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化
  1. 如果遇到一些结构和样式比较简单的小图标,用字体图标
  2. 如果遇到一些结构和样式复杂一点的小图片,就用精灵图

# 2.2 步骤

# 2.2.1 下载

icomoon.io www.iconfont.cn

# 2.2.2 引入

  1. 把fonts文件夹放入页面根目录下
  2. 在CSS样式中全局声明字体 复制压缩包里style.css里面的代码到css文件中
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3u46ev');
  src:  url('fonts/icomoon.eot?3u46ev#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3u46ev') format('truetype'),
    url('fonts/icomoon.woff?3u46ev') format('woff'),
    url('fonts/icomoon.svg?3u46ev#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  1. 打开demo.html 复制需要的图标(小方框)或者前面的代码加\粘贴到需要的地方
  2. 声明字体
font-family: 'icomoon';

# 2.2.3 追加

上传压缩包中的selection.json,选中想要的新图标,从新下载压缩包,并替换原来的文件即可

# 3. CSS三角

div {
    width: 0;
    height: 0;
    line-height: 0; /*为了兼容性*/
    font-size: 0;
    border: 10px solid transparent; 
    border-top-color: pink;  /*箭头向下的三角形*/
}

子绝父相 做 小三角

# 4. CSS用户界面样式

# 4.1 更改用户的鼠标样式 cursor

选择器 {
    cursor: default; /*默认*/
    cursor: pointer; /*小手*/
    cursor: move;   /*移动*/
    cursor: text;   /*文本光标*/
    cursor: not-allowed; /*禁止*/
}

# 4.2取消表单轮廓 outline

给表单添加

outline: 0;
outline: none;

可以去掉默认的蓝色边框

# 4.3防止拖拽文本域 resize

textarea {
    resize: none;
}

# 5. vertical-align 属性应用

用于设置图片或表单(行内块元素)和文字垂直对齐 middle

vertical-align: baseline; /*默认,元素放置在父元素的基线上*/
vertical-align: top;     /*把元素的顶端于行中最高元素的顶端对齐*/
vertical-align: middle;  /*把此元素放置在父元素的中部*/
vertical-align: bottom;  /*把元素的顶端于行中最低的元素的顶端对齐*/

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

图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐

  • 解决方法
  1. 给图片添加 vertical-align: middle|top|bottom;
  2. 把图片转换成块级元素 display: block;

# 6. 溢出的文字省略号显示

# 6.1 单行文本溢出显示省略号

white-space: nowrap;  /*1.先强制一行内显示文本(默认:normal 自动换行)*/ 
overflow: hidden;     /*2.超出的部分隐藏*/
text-overflow: ellipsis; /*文字用省略号代替超出的部分*/

# 6.2 多行文本溢出显示省略号

适合于webkit浏览器或移动端

overflow: hidden;
text-overflow: ellipsis; 
display: -webkit-box;  /*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;   /*限制在一个块元素显示的文本的行数*/
-webkit-box-orinent: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
  • 推荐让后台人员设置,操作更简单

# 7. 常见布局技巧

# 7.1 margin负值的运用

  • 让每个盒子margin: -1px; 正好压住相邻盒子边框
  • 鼠标经过某个盒子时,提高当前盒子的层级即可(如果没有定位,则加相对定位,如果有定位,则加z-index)

# 7.2 文字环绕浮动元素

# 7.3 行内块的巧妙运用

# 7.4 CSS三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

# 8. CSS初始化

上次更新: 2022/4/21 22:21:34