CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
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初始化
每次敲代码记得把一些样式先设置好比如清楚内外边距啥啥的，直接去复制别人的就行