css高级技巧，包括精灵图字体图标及常见布局技巧

关键词：

今天主要学习了CSS高级技巧，重点掌握精灵图、字体图标的使用，单行溢出显示省略号和一些常用的布局技巧！
今日框架：

今日重点：
一、精灵图：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
1）精灵图又称雪碧图，CSS Sprites
2）将网页中需要使用的多张小图片整合到一张大图中，这样只要向浏览器发送更少次数的请求即可获得更多的图片。
3）精灵图主要针对背景图片使用
4）使用精灵图的核心是设置背景图片 的 background-position（负值）
5）x 轴是从左到右变大，从右向左移动会减少（负值）；y 轴是从上到下变大，从下向上移动会减少（负值）
6）使用步骤：
（1）基于设计稿明确盒子大小（宽 * 高）；
（2）布局时给盒子指定：width、height 和 background 属性：
（3）使用像素大厨等工具测量图片偏移坐标；
（4）设置 background-position 属性显示正确的图片。
二、字体图标：主要用于显示网页中通用、常用的一些小图标。
1）精灵图有什么缺点：
（1）本质还是图片，文件体积较大；
（2）图片在高清屏幕上放大和缩小会失真（在手机上尤为明显）
（3）图片制作完毕要更换比较复杂
2）展示的是图标，本质属于字体；所以我们可以给字体图标更改大小或颜色。
3）字体图标有什么优点：
（1）轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
（2）灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
（3）兼容性：几乎支持所有的浏览器，请放心使用。
4）在开发中的选择：
（1）字体图标：结构和样式比较简单的小图标（网站风格统一的素材）；
（2）精灵图：结构和样式复杂一点的小图片（网站风格统一的素材）；
（3）图片：非网站设计的，个性化的，例如：高清广告大图、用户上传的产品图片、用户头像等仍然使用独立的图片处理。
5）字体图标下载：
（1）icomoon 字库 https://icomoon.io/
（2）iconfont 阿里字库 https://www.iconfont.cn/
6）字体图标的使用：
（1）将下载包里的 fonts 文件夹放入页面根目录下
（2）在 CSS 样式中全局声明字体
（3）在 CSS 中定义字体图标的类
（4）从下载的 demo.html 页面中复制小框框粘贴到页面中的 span 标签内
三、CSS三角
1）核心原理：CSS 中边框连接处是斜边连接的。
2）CSS 做三角形的步骤：
（1）指定盒子的宽、高为 0 —— 让四条边都靠在一起；
（2）用 border 属性绘制透明边框
（3）需要哪个方向的三角形，就给哪个方向指定颜色（顺序：上右下左）
四、用户界面样式
1）鼠标样式（cursor）：

2）取消表单轮廓和防止拖拽文本域
（1）取消表单输入框的轮廓：outline: none;
（2）禁止 textarea 被拖拽：resize: none;
3）实现行内块和文字垂直居中对齐（vertical-align）：
（1）用于设置图片或者表单(行内块元素）和文字垂直对齐。
（2）
4）图片底侧空白缝隙原因和解决方案：
原因：行内块元素和文本默认按照基线对齐。
解决方案：（1）添加 vertical-align：middle | top | bottom（推荐使用）；
（2）把图片转换为块级元素 display: block;
（3）给父元素添加font-size：0；
5）单行文字溢出省略号显示：
三个条件：（1）强制在一行显示文本，默认 normal 会自动换行 ：white-space: nowrap;
（2）超出的部分隐藏 ：overflow: hidden;
（3）文字用省略号替代超出的部分 ：text-overflow: ellipsis;
6）多行文字溢出省略号显示：
（1）超出的部分隐藏 ：overflow: hidden;
（2）文字用省略号替代超出的部分：text-overflow: ellipsis;
（3）弹性伸缩盒子模型显示 ：display: -webkit-box;
（4）限制在一个块元素显示的文本的行数 ：webkit-line-clamp: 2;
（5）设置或检索伸缩盒对象的子元素的排列方式 ：webkit-box-orient: vertical;
五、布局技巧

1. margin 负值巧妙运用：解决浮动盒子之间的边框合并
   注：（1）每个盒子的 margin 往左侧移动 -1px 正好压住相邻盒子边框
   （2）右侧盒子是压住左侧盒子的，（1）给li加个相对定位 （2）使用 z-index 属性，修改盒子的显示层级，
   2）文字围绕浮动元素：利用了浮动元素不会压住文字的特性
   3）行内块的巧妙运用：利用行内块元素中间有缝隙特性自动给标签间添加间距
   六、CSS初始化
   重点单词：
   cursor pointer：鼠标小手
   outline: none：取消表单输入框的轮廓
   resize: none：禁止 textarea 被拖拽
   vertical-align：实现行内块和文字垂直居中对齐
   vertical-align:middl：行内块元素与文字中部对齐
   white-space: nowrap：强制一行显示
   text-overflow: ellipsis：文字用省略号替代超出的部分
   有关定位的分类，子绝父相与定位扩展可点击a=href"https://www.cnblogs.com/kk199578/p/13946142.html"

前端基础-css高级技巧(代码片段)

css高级技巧一.精灵图1.为什么需要精灵图2.精灵图（sprites）的使用二.字体图标1.优点（了解）2.字体图标的下载3.适用场景4.CSS三角三.CSS用户界面样式1.鼠标样式2.取消表单轮廓和防止拖拽文本域四.vertical-align属性... 查看详情

css高级技巧——精灵图，字体图标，三角形等(代码片段)

欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可博客园主页：博客园主页-冰山一树SankeyCSDN主页：CSDN主页-冰山一树Sankey前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css... 查看详情

同样是网页前端小白你的页面为什么更高级？(代码片段)

...目录前言一、一个完整网页的布局方法二、增加页面布局高级感1.定位2.元素的显示与隐藏3.巧用精灵图、字体图标、CSS三角4.CSS用户页面布局样式5.图片与文字之间的距离6.常见布局技巧总结前言学习了网页前端中的HTML和CSS也许... 查看详情

css高级布局技巧

CSS高级布局技巧随着IE8逐渐退出舞台，很多高级的CSS特性都已被浏览器原生支持，再不学下就要过时了。用 :empty 区分空元素兼容性：不支持IE8Demo假如我们有以上列表：<div class="item">a</div><div class="item"&... 查看详情

十几个css高级常见技巧汇总（虚线框三角形优惠券卡券滚动条多行溢出...）...

大家好，我是漫步，今天来分享一些比较高级复杂的CSS技巧，都是我们平常常用的，或许对你有所帮助。设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选... 查看详情

vue学习第十天css高级技巧----css用户界面样式/vertical-align属性应用/溢出文字用省略号显示/常见布局技巧**css初始化的原因**

　　　　　　　　　　　　　　　　　用户界面样式 1）鼠标样式cursor　　licursor:pointer;　　设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。　　　　 2、轮廓线outline　　给表单添加outline：0；或者ou... 查看详情

web开发技巧-网页排版布局常见问题及解决办法

在前端开发过程中比较麻烦的地方其实并不是开发，而是考虑用哪些页面布局样式，一个好的布局排版重点突出，看起来舒适不费劲，整体简洁大方，更重要的是能让用户更好的更方便的浏览网站。今天小千... 查看详情

css精灵图&字体图标

精灵图为什么需要精灵图为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术精灵图（sprites）的使用精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。这个大图片也... 查看详情

ios核心动画高级技巧-8(代码片段)

iOS核心动画高级技巧-1 iOS核心动画高级技巧-2 iOS核心动画高级技巧-3 iOS核心动画高级技巧-4 iOS核心动画高级技巧-5 iOS核心动画高级技巧-6 iOS核心动画高级技巧-715.图层性能图层性能要更快性能，也要做对正... 查看详情

前端基础-css高级(代码片段)

一.精灵图1.为什么需要精灵图减少服务器接收和发送请求的次数，提高页面的加载速度2.精灵图（sprites）的使用原理核心：background-position小测试：拼出自己名字二.字体图标1.优点（了解）轻量级;灵活... 查看详情

htm的常见布局

布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些... 查看详情

css之精灵图与字体图标

本文内容：精灵图字体图标   首发日期：2018-05-01精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访... 查看详情

css高级技巧

元素的显示与隐藏display显示display设置或检索对象是否及如何显示。display:none隐藏对象display：block除了转换为块级元素之外，同时还有显示元素的意思。特点:　　隐藏之后，不再保留位置。visibility可见性设置或检索是否显示对... 查看详情

深入理解css中em,rem,ex区别，及使用技巧(代码片段)

CSS中常见尺寸单位描述%百分比in英寸cm厘米mm毫米ex一个ex是一个字体的x-height。(x-height通常是字体尺寸的一半。)pt磅(1pt等于1/72英寸)pc12点活字(1pc等于12点)px像素(计算机屏幕上的一个点)em1em等于当前的字体尺寸。2em等于当前字体尺... 查看详情

定位方式及css高级技巧

定位Background-position背景位置浮动，在一个浮字上面，我们的定位，在一个位上。CSS离不开定位，特别是后面的JS特效，天天和定位打交道。为什么要使用定位？      元素的定位属性元素的定位属性主要包括... 查看详情

js数组reduce()方法详解及高级技巧(代码片段)

转 https://www.jianshu.com/p/e375ba1cfc471、语法arr.reduce(callback,[initialValue])reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元... 查看详情

史上最全html和css布局技巧(代码片段)

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元... 查看详情

面试6大常见问题及应对技巧，2022不再入坑

又是一波离职高峰，很多小伙伴已经开始投身跳槽的准备中了。大家选择跳槽无非是想增加自己的工资收入，所以面试就显得尤为重要，面试的好与不好，未来整个的薪资水平都可能受影响。所以今天在这里为大... 查看详情