CSS（高级技巧）

最新推荐文章于 2024-11-12 22:56:44 发布

grammr

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量98

点赞数

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/m0_54487444/article/details/123142964

版权

CSS高级技巧

一、精灵图

1.1为什么需要精灵图

目的：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）

核心原理：将网页中的一些小的背景图像整合到一张大图中，这样服务器只需要请求一次就可以啦

1.2精灵图的使用

使用精灵图的核心：

1.精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图中

2.这个大图片也称为sprites 精灵图或者雪碧图

3.移动背景图片位置，此时可以使用background-position

4.移动的距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同

5.因为一般情况下都是往上往左移动，所以数值是负值

6.使用精灵图的时候需要精准测量，每个小背景图片的大小和位置

二、字体图标

2.1字体图标的产生 iconfont

主要用于显示网页中通用的、常用的一些小图标。

字体图标可以为前段提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2字体图标的优点

轻量级：一个字体图标要比一系列的图像小。减少服务器的请求
灵活性：本质是文字，可以随意改变颜色等
兼容性：几乎支持所有的浏览器

总结： 1.简单的小图标 ----> 字体图标

2.复杂的图标 ------>精灵图

2.3字体图标的下载

网站：

icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon

阿里 iconfont 字库 http://www/iconfont.cn/

2.4字体图标的引入

2.5字体图标的追加

把压缩包里面的 selection.json 重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。

三、CSS三角

四、CSS用户界面样式

界面样式就是更改一些用户操作样式，以便提高更好的用户体验

4.1鼠标样式 cursor

li { cursor: pointer}

设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.2轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

4.2防止拖拽文本域 resize

textarea { resize: none;}

五、vertical-align属性应用

5.1实现行内块和文字垂直居中对齐

CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

vertical-align: baseline | top | middle | bottom;

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低元素的顶端对齐

5.2解决图片底部默认空白缝隙问题

解决方法：1.给图片添加 vertical-align: baseline | top | middle | bottom; 提倡

2.把图片转换为块级元素 display: block;

六、溢出的文字省略号显示

6.1单行文字溢出显示省略号

            /* 1. 先强制一行内显示文本 */

            white-space: nowrap;

            /* 2.超出的部分隐藏 */

            overflow: hidden;

            /* 3.文字用省略号代替超出的部分 */

            text-overflow: ellipsis;

6.2多行文本溢出显示省略号

            overflow: hidden;

            text-overflow: ellipsis;

            /* 弹性伸缩盒子模型显示 */

            display: -webkit-box;

            /* 限制在一个块元素显示的文本的行数 */

            -webkit-line-clamp: 2;

            /* 设置或检索伸缩盒对象的子元素的排列方式 */

            -webkit-box-orient: vertical;

七、常见布局技巧

7.1margin负值的应用

1.让每个盒子margin往左移动 -1px 正好压住相邻盒子的边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加 z-index）

7.2文字围绕浮动元素

运用浮动

7.3行内块的巧妙运用

7.4CSS三角强化

            width: 0;

            height: 0;

            border-color: transparent red transparent transparent;

            border-style: solid;

            border-width: 22px 8px 0 0;