CSS-一些高级技巧 随学笔记
CSS的一些高级技巧
一、精灵图
1.为什么需要精灵图？
一个网页中往往会应用很对小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
*核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
*精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
2.精灵图（sprites）的使用
使用精灵图的核心内容：
（1）精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
（2）这个大图片也成为了精灵图或者雪碧图。
（3）移动背景图片位置，此时可以使用background-position。
（4）移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。x坐标轴向右为正，y坐标轴向下为正。
（5）因为一般情况下都是往上往左移动，所以数值是负值。
（6）使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<style> .box1 { width: 60px; height: 60px; margin: 100px auto; background: url(images/sprites.png) no-repeat -182px 0; /* background-position: -182px 0; */ } .box2 { width: 27px; height: 25px; margin: 200px auto; background: url(images/sprites.png) no-repeat -155px -106px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
总结：
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现--background-position。
3.一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正，y轴向下为正。
二、字体图标
1.字体图标的产生
字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。
以icomoon字库为例：
![]()
精灵图是有诸多优点的，但是缺点也很明显：
（1）图片文件还是比较大的；
（2）图片本身放大和缩小会失真。
（3）一旦图片制作完毕想要更换非常复杂。
因此，字体图标iconfont的出现解决了这一问题。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2.字体图标的优点
轻量级:一个图标字体要比一系列的图标要小.一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求.
灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器，请放心使用。
*注意：
字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
3.推荐下载网站：
（1）icomoon字库 http://icomoon.io
IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开较慢。
（2）阿里iconfont字库 http://iconfont.cn/
这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图表上传生成。重点是，
4.字体图标的引入：
（1）把下载包里面的fonts文件夹放入页面根目录下
（2）在css样式中全局声明字体：简单理解就是把这些字体文件通过CSS引入到页面中。一定注意字体文件路径的问题。
*方式：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
以icomoon字库为例：
1.进入主页
2.进入网站后选取自己想要的文字图标
3.我们选中的图标就都在这里了，点击下载
4.下载解压后，将fonts文件夹复制到页面根目录下：
5.引入图标
回到图标库，复制自己想要的图标，到自己写的页面上，通过下面的代码引入。
<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?iwkhcf'); src: url('fonts/icomoon.eot?iwkhcf#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?iwkhcf') format('truetype'), url('fonts/icomoon.woff?iwkhcf') format('woff'), url('fonts/icomoon.svg?iwkhcf#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span { font-family: 'icomoon'; font-size: 100px; color: aqua; } </style> </head> <body> <span></span> </body>
效果如图：
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标是一些网页常见的小图标，我们可以直接在网上下载。
三、用户界面样式
1.什么是界面样式？
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
2.鼠标样式 cursor
*方法：
li {
cursor：position；
}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
参数:
default 小白箭头 默认；
pointer 小手；
move 移动；
text 文本；
not-allowed 禁止；
<body> <ul> <li style="cursor: default;">我是默认的小白箭头鼠标样式</li> <li style="cursor: pointer;">我是鼠标小手样式</li> <li style="cursor: move;">我是鼠标移动样式</li> <li style="cursor: text;">我是鼠标文本样式</li> <li style="cursor: not-allowed;">我是鼠标禁止样式</li> </ul> </body>
3.轮廓线 outline
给表单添加outline：0；或者outline：none;样式之后，就可以去掉默认的蓝色边框。
input {
outline：none；
}
4.防止拖拽文本域
给文本域添加resize：none；就可以防止文本域被拖拽。
<style> input,textarea { outline: none; } textarea { resize: none; } </style> </head> <body> <input type="text"> <textarea name="" id="" cols="30" rows="10"></textarea> </body>
四、CSS三角制作
利用css制作三角形：
如果一个盒子高度和宽度都是0时，给他添加一个边框，效果如图：
<style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-bottom: 10px solid red; border-left: 10px solid blue; border-right: 10px solid green; } </head> <body> <div class="box1"></div> </body>
由此我们可以想到利用这个原理来制作三角，原理就是想要那个方向的三角形，就把另外三条边框的颜色设为透明。
<style> .box2 { margin: 100px auto; width: 0; height: 0; border: 10px solid transparent; border-top-color: pink; } </style> </head> <body> <div class="box2"></div> </body>
效果如图：
可以通过改变边框线的大小改变三角的大小。
五、vertical-align属性
CSS的 vertical-align属性的使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
*官方解释：用于设置一个元素的垂直对齐方式,但是他只针对于行内元素或者行内块元素。
*语法：
vertical-align：baseline|top|middle|bottom
参数：
baseline 默认。元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
图片和表单都属于行内块元素，默认的vertical-align是基线对齐。
<style> img { vertical-align: top; /* vertical-align: middle; */ /* vertical-align: bottom; */ } textarea { vertical-align: middle; } </style> </head> <body> <img src="images/ldh.jpg" alt="">刘德华 <textarea name="" id="" cols="30" rows="10"></textarea>请您留言 </body>
效果如图：
有这样一个bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方案：
1.给图片添加vertical-align：middle|top|bottom等。（提倡使用的）
2.把图片转换为块级元素 display：block；
六、溢出文字省略号显示
1.单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
（1）先强制一行內显示文本
white-space:nowrap；（默认normal自动换行）
（2）超出的部分隐藏
overflow：hidden；
（3）文字用省略号代替超出的部分、
text-overflow:ellipsis；
<style> div { width: 150px; height: 80px; margin: 100px auto; background-color: skyblue; /* 这个单词的意思是如果文字显示不开，自动换行 */ /* white-space: normal; */ /* 1.这个单词的意思是如果文字显示不开也必须强制到一行显示. */ white-space: nowrap; /* 2.溢出部分隐藏起来 */ overflow: hidden; /* 3.溢出部分用省略号显示 */ text-overflow: ellipsis; } </style> </head> <body> <div> 哈哈哈哈哈哈哈哈哈哈或或或或，此处省略一万字 </div> </body>
效果如图：
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大的的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）
主要步骤：
overflow：hidden；
text-overflow：ellipsis；
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp：2；
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient：vertical；
<style> div { width: 150px; height: 45px; background-color: skyblue; margin: 100px auto; overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display:-webkit-box; /*限制在一个块元素显示的文本的行数*/ -webkit-line-clamp: 2; /*设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-box-orient: vertical; } </style> </head> <body> <div> 哈哈哈哈哈哈哈哈哈哈或或或或或，此处省略一百万个字，哈哈哈哈哈哈哈哈或 </div> </body>
效果如图：
这个方法需要严格控制盒子大小。
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
浙公网安备 33010602011771号