01 CSS高级

精灵图

1. 为什么需要精灵图?
   

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

2. 精灵图(spriyes)的使用(重要)
   使用精灵图核心:

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

总结:

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

字体图标

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

1. 图片文件还是比较大的
2. 图片本身放大和缩小会失真
3. 一旦图片制作完毕 想要更换非常复杂
   字体图标iconfont解决了以上问题
   字体图标是一种方便高效的图标使用方式,** 展示的是图标, 本质属于字体**

优点:

• 轻量级: 一个图标字体要比一系列的图像要小. 一旦字体加载了, 图标就会马上渲染出来, 减少了服务器请求
• 灵活性: 本质其实是文字, 可以很随意的改变颜色, 产生阴影, 透明效果, 旋转等
• 兼容性: 几乎支持所有的浏览器, 请放心使用
  注意: 字体图标不能替代精灵技术, 只是对工作中图标部分技术的提升和优化

总结:

1. 如果遇到一些结构和样式比较简单的小图标, 就用字体图标[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSsC2Xkj-1614062825965)(index_files/e93a5f29-4a1e-46e6-b4f4-ca13986d327d.jpg)]
2. 如果遇到一些央视和样式复杂一点的小图片, 就用精灵图
   

---

字体图标是一些网页常见的小图标, 我们直接网上下载即可 1. 字体图标下载 2. 字体图标的引入(引入到我们html页面中) 3. 字体图标的追加(以后添加新的小图标)

推荐下载网址:

• icomoon
• 阿里iconfont
  

字体图标的追加

把压缩包里面的selection.json重新上传, 然后选中自己想要新的图标, 从新下载压缩包, 并替换原来的文件即可

选网站中的这个:

CSS三角

网页中常见一些三角形, 使用CSS直接画出来就可以, 不必做成图片或者字体图标

.box2 {
    float: left;
    width: 0;
    height: 0;
    /* 下面两个实际上是不需要的, 是为了照顾低版本浏览器, 实际可以不加 */
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-left-color: sandybrown;
    margin-top: 10px;
}

用户界面样式

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

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式cursor

li { cursor: pointer; }
设置或检索在对象上移动的鼠标指针采取何种系统预定义的光标形状

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

表单轮廓线outline

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

防止拖拽文本域(textarea)resize

实际开发中, 我们文本域右下角是不可以拖拽的
textarea {resize: none; }
注意: 文本域要写在一行上, 中间不要有空格或空行

vertical-align属性应用

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

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

据说: vertical-align 和行内块元素更配哦
<img src="images/png/8.png" alt="">abcdefghijklmn
<textarea name="" id="" cols="30" rows="10"></textarea>请您留言

图片底侧有空白缝隙解决方案

bug: 图片底侧会有一个空白缝隙, 原因是行内块元素会和文字的基线对齐
解决方法有两种:

1. vertical-align: middle/bottom;就可完美解决(提倡使用)
2. 把图片转换为块级元素 display: block;

溢出的文字省略号显示

• 单行文本溢出显示省略号–必须满足三个条件
  /* 1. 先强制一行内显示文本 /
  white-space: nowrap; (默认normal自动换行)
  / 2. 超出的部分隐藏 /
  overflow: hidden;
  / 3. 文字用省略号替代超出的部分 */
  text-overflow: ellipsis;
• 多行文本溢出显示省略号
  多行本文溢出显示省略号, 有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内核)

常见布局技巧

1. margin负值运用
   

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

2. 文字围绕浮动元素
   

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

3.行内块元素的巧妙应用
分页

4. CSS三角强化
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJXYIdCL-1614062825979)(index_files/57672501-a17f-47cd-bc10-5a9ff3d30b50.jpg)]

width: 0;
height: 0;
border-top: 30px solid red;
border-right: 20px solid white;

5. CSS初始化
   不同浏览器对有些标签的默认值是不同的, 为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容性, 我们需要对CSS初始化

/* 清内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}
/* 去掉li的小圆点 */
li {
    list-style: none;
}

img {
    /* 照顾低版本浏览器, 如果图片外面包含了连接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}
/* 经过按钮时, 鼠标变小手 */
button {
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623;
}

button,
input {
    /* "\5B8B\4F53"宋体  Unicode编码, 这样就可以有效的避免浏览器解释CSS代码的时候出现乱码问题 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53" sans-serif;
}

body {
    /* CSS3 抗锯齿形, 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53" sans-serif;
    color: #666;
}

.hide,
.none {
    display: none;
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}

.clearfix {
    *zoom: 1;
}