02-CSS高级技巧

一、精灵图

1、为什么需要精灵图？

• 一个网页中往往会应用很多很小的背景图像作为装饰，当网页中图像过多时，服务器会频繁接收和发送请求图片，造成服务器压力过大，这大大降低页面的加载速度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、使用精灵图的目的

• 为了有效地减少服务器接收和放松请求的次数，提高页面的加载速度

3、精灵图( spritrs )的使用

使用精灵图技巧：

• 1、精灵图主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中

• 2、这个大图片也称为 sprites 精灵图 或 雪碧图

• 3、移动背景图片位置，此时可以使用background-position.

• 4、移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同

• 5、因为-般情况下都是往上往左移动,所以数值是负值。

• 6、使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。

---

二、字体图标

1、字体图标产生及使用场景

字体图标使用场景：主要显示于网页种种那个通用、常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显

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

此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont。

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

2、字体图标的优点

轻量级、灵活性、兼容性

总结：

• 1.如果遇到-些结构和样式比较简单的小图标,就用字体图标。
• 2.如果遇到一-些结构和样式复杂点的小图片 ,就用精灵图。

3、字体图标的下载网站

icomoon字库

阿里 icomoon字库

4、字体图标引入

1、把下载包里的 fonts文件夹放到页面根目录下

2、在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中

 @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?lmw66l');
            src:  url('fonts/icomoon.eot?lmw66l#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?lmw66l') format('truetype'),
            url('fonts/icomoon.woff?lmw66l') format('woff'),
            url('fonts/icomoon.svg?lmw66l#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

5、字体图标的追加

如果工作中,原来的字体图标不够用了, 我们需要添加新的字体图标到原来的字体文件中。

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

---

三、鼠标样式

设置鼠标在检索对象上移动的鼠标指针显示的光标效果形状

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

四、表单的轮廓线 outline

给表单添加 outline:0; 或者 outline：none;央视之后，可以去掉默认的蓝色边框

input { outline: none;}

五、防止拖拽文本域 resize

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

textarrea { resize: none;}

六、图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此时可以给图片、表单这些行内块元素的vertical-align 属性设置为 middle就可以让蚊子和图片垂直居中对齐了

使用场景：

• CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对

• 官方解释:用于设置-个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline| topI middle| bottom

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

---

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

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

主要解决方法有两种：

• 1、给图片添加vertical-align:middle| top| bottom等。 (提倡使用的)
• 2、把图片转换为块级元素display: block;

八、文本溢出显示省略号

示例：

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

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

2、多行文本显示省略号，有较大兼容性问题，适合webKit浏览器或移动端( 移动端大部分是webkit内核 )

	/* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒子对象的自元素排列方式 */
    -webkit-box-orient: vertical;

---

九、布局技巧

1、margin负值运用

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

2、文字环绕浮动元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUd9l6L9-1580714222495)(media\文字环绕互动浮动元素.jpg)]

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

3、行内块巧妙运用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbasBVld-1580714222497)(media\行内块巧妙运用.jpg)]

• 行内块自带间隔

4、CSS 三角强化

原理：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3sjhmkAr-1580714222497)(media\CSS三角强化.png)]

代码：

	width: 0;
    height: 0;  
/* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
    border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
    border-width: 100px 50px 0 0 ;

---

十、CSS初始化

不同浏览器对标签的默认值十不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是值重设浏览器的样式。(也称为CSS reset)

每个网站必须首先进行CSS初始化

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如:

• 黑体\9ED1\4F53
• 宋体\5B8B\4F53
• 微软雅黑\5FAE\8F6F\96C5\9ED1