CSS的高级技巧--精灵图/字体图标/特殊样式/文字溢出等

最新推荐文章于 2023-10-23 14:15:54 发布

杨蛋蛋~R

最新推荐文章于 2023-10-23 14:15:54 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108709618

版权

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS高级技巧

精灵图

此技术是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

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

精灵图（sprites）的使用：

精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片上。
大图片称为sprites
移动背景图片位置，可以用 background-position
移动的距离就是目标图片的 x 和 y 坐标，注意网页中的坐标有所不同
上正下负，右正左负，因为一般情况下都是向上或左移动，所以数值为负值
使用精灵图时需要精确测量，每个小背景图片的大小和位置

例：

background: url(images/1.png) no-repeat -40px -180px;
或：
background-position：-40px -180px;

字体图标

字体图标主要用于网页中通用的，常用的一些小图标
（精灵图也可，但精灵图存在以下缺点：
1.图片文件还是比较大的
2.图片本身放大或缩小会失真
3.一旦图片制作完毕，想更换会很麻烦

字体图标（iconfont)：展示的是图标，本质属于字体）
优点：

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

//字体图标不能替代精灵技术，它只是对工作中图标部分技术的提升和优化

步骤：

字体图标的下载：
icomoon字库: http://icommon.io
阿里iconfont字库: http://www.iconfont.cn/

2.字体图标的引入

把下载包里的fonts文件夹放入页面根目录下
在css样式中全局声明字体，即把这些字体文件通过css引入到页面中（注意路径）声明从下载包里的style.css文档中复制即可
例：

/*字体图标*/
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?o31kxg');
    src:url('fonts/icomoon.eot?o31kxg#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?o31kxg') format(‘truetype‘),
        url(‘fonts/icomoon.woff?o31kxg‘) format(‘woff‘),
        url(‘fonts/icomoon.svg?o31kxg#icomoon‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
    font-display:block;
}

3.字体图标的使用

/*style中代码*/
span{
font-family: 'icomoon';
.....其他样式...
}

/*body中代码*/
<span >字体图标 </span>

///字体图标从下载包的html文件中复制下来（一般为一个小框）

字体图标的追加：把需要添加的字体图标放到原来的字体文件中，然后把压缩包内的.json文件重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可

三角

 .box{
        width: 0;
        height: 0;   //宽，高，必须设置为0
        line-height:0;  //此句代码是为了照顾浏览器的兼容性
        font-size:0;   //此句代码是为了照顾浏览器的兼容性
        border: 10px solid transparent; //把边框设置为透明，三角形大小取决于border值的大小
        border-left-color: #000;  //设左边框为粉红色将会得到一个三角尖朝右边的三角形        
      }

用户界面样式

即更改用户操作的样式（例：鼠标变成小手），以提供更好的用户体验
1.更改鼠标样式

li {   cursor : 属性值  }

//属性值如下：
default：         默认值
pointer:          小手
move：            移动
text:             文本
not-allowed：     禁止

2.表单轮廓线
（1）给表单添加 outline:0;或者outline:none；样式后，就可以去掉默认的蓝色边框

input  {  outline:0;   }

（2）防止文本域被拖拽

textarea {   resize : none ;  }

vertical-align的应用

经常用于设置图片或者表单（行内块元素）和文字垂直对齐
只对行内元素或行内块元素有效

语法：

 vertical-align ：属性值

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

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

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方法：（两种）
1.给图片添加 vertical-align:属性值；（推荐）

2.把图片转换为块级元素

文字溢出省略号显示

1.单行文字溢出省略号显示

必须满足三个条件：

/*先强制一行内显示文本*/
white-space : nowrap ;
/*超出的部分隐藏*/
overflow : hidden ;
/*文字用省略号替代超出的部分*/
text-overflow : ellipsis ;

2.多行文字溢出省略号显示

此法有较大兼容性问题，适合WebKit浏览器或者移动端

overflow : hidden ;
text-overflow : ellipsis ;
/*弹性伸缩盒子模型显示*/
display : -webkit-box ;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp : 2 ;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient : vertical ;