CSS高级技巧

最新推荐文章于 2024-08-24 09:47:56 发布

一只小白657

最新推荐文章于 2024-08-24 09:47:56 发布

阅读量2.6k

点赞数

分类专栏：笔记文章标签： 1024程序员节 css

本文链接：https://blog.youkuaiyun.com/weixin_45139556/article/details/120942750

版权

本文详细介绍了CSS的高级技巧，包括精灵图的使用、字体图标的优势与下载、CSS三角形绘制、用户界面样式的调整、vertical-align属性的应用以及文字溢出的省略号显示。此外，还探讨了常见布局技巧和CSS初始化的重要性，帮助开发者提升网页性能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS高级技巧

一.精灵图
- 1.1为什么需要精灵图
- 1.2精灵图的使用
二.字体图标
三.CSS三角
- 3.1原理
四.CSS用户界面样式
五. vertical-align属性应用
- 5.1CSS的`vertical-align`属性
- 5.2解决图片底部默认空白缝隙问题
六.溢出的文字省略号显示
- 6.1. 单行文本溢出显示省略号--必须满足三个条件
- 6.2多行文本溢出显示省略号
七.常见布局技巧
八.CSS的初始化

一.精灵图

1.1为什么需要精灵图

一个网页图片过多时，服务器频繁地接收发送请求图片，会造成服务器请求压力过大，将大大降低页面的加载速度。
css精灵图技术（也叫CSS Sprites、CSS雪碧），可以有效地减少服务器接收和发送请求地次数，提高页面的加载速度
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.2精灵图的使用

使用精灵图的核心：

精灵技术主要针对小的背景图片使用，就是把多个小背景图片整合到一张大图片中
这个大图片被叫做精灵图，或者雪碧图，sprites精灵图
移动背景图片位置，此时可以使用background-position
移动的距离就是这个目标图片的x坐标和y坐标，要注意网页中的坐标有所不同
一般情况图片都是往左，往上移动，所以坐标是负值
使用精灵图时需要精确测量

二.字体图标

字体图标iconfont使用场景：主要用于显示网页中的通用、常用的一些小图标
字体图标可以为工程师提供一种方便高效的图标使用方法，展示的是图标，本质属于字体

2.1为什么不使用精灵图？

精灵图的缺点：

图片文件还是比较大的
图片本身放大和缩小会实真
一旦图片制作完毕想要更换非常复杂

2.2字体图标的优点

轻量级：一个图标字体要比一系列的图像小，一旦字体加载了，字体图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器

注意：体图图表不能代替精灵技术，只是对工作中图标部分技术的提升和优化

总结

结构样式比较简单的小图标，就用字体图标
结构样式复杂的小图片，就用精灵图

2.3字体图标的下载

推荐网站
icomoon字库 http://icomoon.io
阿里iconfont字库http://www.iconfont.cn/

2.4字体图标的引入

见博客
阿里字体图标的使用

2.5字体图标的追加

添加到项目后，再重新下载即可

2.6字体图标加载的原理

只需要请求一次
在这里插入图片描述

三.CSS三角

网页中常用的一些三角形，可以直接用CSS画出来，不必做成图片或者字体图标，如下所示
在这里插入图片描述

3.1原理

边框其实是一个梯形，短边的底为其对应的盒子的长度，梯形的高为边框的宽度，然后梯形是一个等腰梯形，两个角为45°
在这里插入图片描述

    <style>
        .box1 {
     
            width: 10px;
            height: 10px;
            border-top: 10px solid blanchedalmond;
            border-right: 10px solid blue;
            border-bottom: 10px solid red;
            border-left: 10px solid green; 
        }
    </style>

效果
在这里插入图片描述
当我们把内部的盒子宽度，高度都设置为0时，其余三个边框设置为透明色，就可以得到一个等腰直角三角形

<style>
        .box1 {
     
            width: 0px;
            height: 0px;
            /* border: 10px solid red; */
            border: 10px solid transparent;
            border-top: 10px solid skyblue;
        }
</style>

在这里插入图片描述

四.CSS用户界面样式

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

更改用户的鼠标样式
更改表单轮廓
防止表单域拖拽

4.1更改用户的鼠标样式cursor

选择器 { cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
在这里插入图片描述

4.2表单轮廓线outline

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

4.3防止表单域拖拽

实际开发中，我们文本域右下角是不可以拖拽的
textarea { resize: none;}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单轮廓</title>
    <style>
        input {
     
            /* 取消轮廓线 */
            outline: 0;
        }
        textarea {
     
            /* 取消轮廓线 */
            outline: none;
            /* 防止拖拽文本域 */
            resize: none;
            padding: 10px;
        }
    </style>
</head>

最低0.47元/天解锁文章