Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！
加油，一起CHIN UP！💪💪
🔗个人主页：E绵绵的博客
📚所属专栏：1. JAVA知识点专栏
深入探索JAVA的核心概念与技术细节
2.JAVA题目练习
实战演练，巩固JAVA编程技能
3.c语言知识点专栏
揭示c语言的底层逻辑与高级特性
4.c语言题目练习
挑战自我，提升c语言编程能力
5.Mysql数据库专栏
了解Mysql知识点，提升数据库管理能力
6.
学习前端知识，更好的运用它
7. css3知识点专栏
在学习html5的基础上更加熟练运用前端
8.JavaScript专栏
在学习html5和css3的基础上使我们的前端使用更高级
📘 持续更新中，敬请期待❤️❤️
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
1.精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中
2.该大图当背景后是以左上角对齐的，所以要让其他小背景图片插入进去就要移动大背景图
3.移动大背景图片的位置，此时可以使用 background-position。
4.一般情况下都是往上往左移动，所以数值是负值，往左移动，所以是负值。
5.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置，根据位置然后移动相应距离。
精灵图的优点很多，但是缺点也很明显
1.图片文件还是比较大的
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont
字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体。
优点：
轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器
步骤：
字体图标的下载
字体图标的引入(引入到我们html页面中)
字体图标的追加(以后添加新的小图标)
1.点击 IcoMoon App
2.选择需要的图标
3.点击Generate Font
4.点击下载
阿里 iconfont字库：免费，但是需要登录
生成之后点击download
1.把下载包里面的 fonts 文件夹放入页面根目录下
2.在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中
右键打开 style.css，复制如图代码引入我们自己的CSS文件中
3.html标签内添加小图标
我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进 <span></span>标签中
mac不显示小框框，直接复制即可
4.给标签定义字体
注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon（如果上面改为pink,下面也是pink）
把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。
我们要设定盒子宽高是0，并且指定边框，不同边框长度会造成不同的现象，最经典的是四个相同长度边框生成如下的第一个图。所以生成一个三角就可以让其他三个边框变为透明色，留一个就行。
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状，以下是pointer可以所属的很多值：
给表单添加 outline:0; 或者outline: none;样式后，就可以去掉默认的蓝色边框
本来默认文本域可以无限放大，加入该代码后就可以控制了，正常文本域我们都是防止其被拖拽
:
- 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
- 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
让图片和文字垂直居中，修改的是img或者textarea属性,行内块元素都可以
图片底侧空白缝隙解决：
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）
主要解决办法有两种：
给图片添加 vertical-align : middle | top |bottom 等（推荐）
把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性
必须满足三个条件：
多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)
此时如果要让盒子发生变化，标准流中的盒子发生变化就会因为重叠有一部分不会变，所以提高当前盒子的层级即可：
如果没有定位，则加相对定位(保留位置，并且能覆盖标准流)
如果有定位，则加 z-index
巧妙运用浮动元素不会压住文字的特性
先准备大盒子，左边盒子浮动，右边不需要盒子，文字会自动环绕
因为这里块很多，用浮动就有点麻烦，不如直接用行内块，行内块本身之间就有点距离，浮动还需要设置。
把这些链接盒子转换为行内块，之后给父级大盒子指定 行内块元素会水平居中，之后操作就轻车熟路了。
我们不只是能做出如上最简单的三角形，还能根据不同边框长度做出更多不同的三角形，在这三角形的做法我就只说一种，另外的你们自己去探索。此外还说一点不能做出三角形的情况。
当边框的左边右边都为0或者上面下面都为0时就没有三角形，其他情况都存在。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/23762.html