CSS高级

一、精灵图
二、字体图标
- 字体图标的优点：
- 这里附一下阿里的字体图标使用方法：
- 三、三角形制作
四、一些样式
- 1.用户界面鼠标样式cursor
- 2.轮廓线outline
- 3.防止拖拽文本域resize
- 4.vertical-align属性的应用
- 5.单行溢出文字省略号显示
五、布局技巧
- 1.margin负值的巧妙运用
- 2.利用文字环绕来布局
- 3.三角元素的妙用
- 4.CSS初始化

一、精灵图

精灵图是啥捏，其实说白了就是一个合并的图层，把一个网页里的所有小图标合并成一个大的图，然后某个位置要用某个图的时候，先把这个大的图调用过来，通过挪动位置来定位到里面的小图，比如王者荣耀官网这个图：

精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。

精灵图都是往左上移动的，所以用负号，绝对值越大越往左上移动，越小越往右下移动
使用代码试一试：
先用PS切图工具量一下宽高和xy轴的偏移距离，然后再去定义盒子

.box1 {width: 63px;height: 59px;background: url(./images/spirit.png) no-repeat -180px 0;/* 或者可以分开写background: url(./images/spirit.png);background-position: -180px 0; */margin: 100px;}.box2 {width: 26px;height: 25px;background: url(./images/spirit.png) no-repeat -156px -106px;margin: 200px}

<div class="box1"></div><div class="box2"></div>

有点意思
不过精灵图也是有很多缺点的，比如：
1.图片文件比较大
2.图片本身放大缩小会失真
3.图片制作完毕后想要更换会非常麻烦

二、字体图标

基于精灵图的缺点，提出字体图标iconfont
字体图标展示的是图标，但是本质上是字体，具有字体的属性.

字体图标的优点：

这里附一下阿里的字体图标使用方法：

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
其中这个方法最简单：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

举个例子，在阿里iconfont官网：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
点击资源管理-我的项目，然后随便点几个图标加到购物车里，然后复制这个在线的代码加到head标签里，记得前面一定加http://
如果想更新图标也很简单，直接更新完点更新代码就可以

比如下面这个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体图标</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_3407739_yimh1lic7v.css"><style>.icon-zhuye {font-size: 100px;color: pink;}.icon-dianzan {font-size: 200px;color: red;}</style>
</head><body><span class="iconfont icon-zhuye"></span><span class="iconfont icon-dianzan"></span>
</body></html>

然后按照图标下面的类名进行引用，因为图标此时转换成了字体，那么这个时候想要修改图标的样式只需要在CSS中直接对类名里的属性进行修改即可，比如上面这个案例修改后的效果是这样的：

如果是伪元素插入字体图标，加个font-family:‘iconfont’;就行，因为伪元素没法调用iconfont

div::after {content: '\e62e';font-family: "iconfont";
}

三、三角形制作

原理：一个正方形盒子，把三个边框设置成transparent，然后一个设置成有颜色，就可以了

.box {height: 0;width: 0;border: 50px solid transparent;border-bottom-color: red;}

效果是这样的：

三角的大小是border的宽度决定的。

案例：京东的这个特效：

思路，一个三角盒子定位在一个长方形盒子的右上角

  .w {margin: 0 auto;}.box {position: absolute;height: 0;width: 0;margin: auto;top: -40px;right: 20px;border: 20px solid transparent;border-bottom-color: skyblue;}.jd {position: relative;width: 200px;height: 400px;margin: 100px;background-color: skyblue;}

<div class="w"><!-- 京东的下拉框是怎么设计的? 三角定位在正方形盒子上拼起来的--><div class="jd"><div class="box"></div></div>
</div>

四、一些样式

1.用户界面鼠标样式cursor

语法：li {cursor: pointer;}
作用：鼠标放到对象上显示的效果是啥

2.轮廓线outline

给表单input添加outline：0或者outline：none，就可以去掉默认蓝色边框

3.防止拖拽文本域resize

给文本域textarea添加resize:none，这样文本域就不能随意拖拽了。

4.vertical-align属性的应用

图片或者表单（行内块元素）和文字垂直对齐
只要是行内块元素，都可以添加这个属性，如textarea
语法：vertical-align：baseline/ top/ middle/ bottom

比如之前那个学成在线的案例就用的middle

应用：解决图片地图默认空白缝隙的问题
图片底部有空白缝隙，是因为行内块元素会和文字的基线对齐

那么这个时候，我们就可以让图片和文字的顶部/中部/底部对齐就可以，只要不是baseline就ok

.img {vertical-align：/ top/ middle/ bottom}

当然啊，这里也有第二种方法，也就是使用display:block把图片转换为块级元素，不过更推荐使用vertical-align，因为转换为块级元素的话，可能会影响其他的布局

5.单行溢出文字省略号显示

单行文字溢出省略号显示分为三步：
1.如果文字显示不开就强制一行显示

white-space: nowrap;

2.溢出的部分隐藏起来

overflow: hidden;

3.文字溢出时使用省略号表示

     text-overflow: ellipsis;

像这样：

 .box {width: 200px;height: 200px;background-color: pink;margin: 50px auto;/* 默认自动换行：white-space: normal; *//* 单行文本溢出省略号显示分为三步 *//* 1.如果文字显示不开就强制一行显示 */white-space: nowrap;/* 2.溢出的部分隐藏起来 */overflow: hidden;/* 3.文字溢出时使用省略号表示 */text-overflow: ellipsis;}

五、布局技巧

1.margin负值的巧妙运用

在布局盒子的时候，可能会出现两个盒子叠加到一起导致边框变宽的情况，像这样：

那么我们就可以在这个时候设置margin-left: -1px;这样就欧了

 ul li {float: left;list-style: none;width: 200px;height: 300px;border: 1px solid red;margin-left: -1px;}

这个时候，如果想实现鼠标放上去就有选中整个边框的样子怎么做？如果只改变边框颜色，就会出现这种情况：

显然这是不合理的，那么此时怎么办呢？
思路1：如果盒子本身没有定位，那么可以使用相对定位，相对定位不占有位置，就可以压住标准流，优先显示

 ul li:hover {/* 相对定位会占有原来的位置，且会压住标准流 */position: relative;border: 2px solid red;}

思路2：如果盒子本身不得不定位（子绝父相，盒子作为父亲使用了相对定位），那么这个时候我们就可以用到之前学z-index属性，来调整盒子的优先级，属性值越大，层级越高。

ul li:hover {z-index: 1;border: 2px solid red;}

2.利用文字环绕来布局

浮动的发明最开始是做文字环绕效果的。所以我们布局的时候，如果遇到这样的情况：

就可以直接来个图片左浮动，这样文字就会默认环绕图片：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字环绕</title><style>.box {width: 700px;height: 200px;background-color: skyblue;margin: 0 auto;}.pic {float: left;width: 250px;height: 200px;}.pic img {width: 100%;}</style>
</head><body><div class="box"><div class="pic"><img src="./images/name.png" alt=""></div><p>嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷</p></div>
</body></html>

3.三角元素的妙用

如何实现下面这样的三角形效果？

思路：宽高设置为0，右边框Boreder-right调小，上边框border-top调大且透明，下边框和左边框都给0

 .box {width: 0;height: 0;border-top: 100px solid transparent;border-right: 50px solid skyblue;border-bottom: 0px solid pink;border-left: 0px solid red;}

当然啊，上面这种效果是可以简写的：

 .box {width: 0;height: 0;border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}

4.CSS初始化

每次敲代码记得把一些样式先设置好比如清楚内外边距啥啥的，直接去复制别人的就行

CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧相关推荐

CSS高级技巧——精灵图
1. 精灵图为什么需要精灵图精灵图的使用精灵图的案例 1.1为什么需要精灵图在平常上网过程中,打开网址就可以看到网页了,网页中会有许多的小图标及图片,会像服务器去请求某个小图标 ...
iconfont字体图标以及css字体图标在线制作和使用（推荐）
字体图标的制作和使用呢,也不一定非要自己去 https://icomoon.io/ 网站制作,那样子貌似有点麻烦,那么这里给大家一种更简便的操作方式,方便快捷的制作并使用字体图标,同样的,我们还是离不 ...
CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
在iOS应用中使用字体图标及制作字体库
做iOS开发的都知道,因为屏幕分辨率的问题,在iOS app 中都得放两套切图来支持retina屏和非retina屏幕,但是文字就不需要考虑分辨率的问题,所以可不可以将一些图片用文字来代替呢,省时省力 ...
17-CSS3 高级技巧精灵图字体图标滑动门
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
CSS精灵图和字体图标及下载
精灵图和字体图标精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
CSS精灵图及字体图标
一.精灵图(重点) 1.1为什么需要精灵图网页中往往会有很多的小背景图像作为修饰,当频繁向服务器发送请求时,服务器压力过大,降低加载速度. 使用精灵图的目的:减少服务器的请求次数,提高加载速度例子 ...
css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...

CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧