CSS高级技巧

旧城等待， 2022-11-16 10:42 217阅读 0赞

### CSS高级技巧 ###

*  精灵图sprites
 *  字体图标
 *   *   *  Unicode引用
 *  CSS三角做法
 *   *  CSS三角进阶
 *  解决图片底部空白缝隙
 *  溢出文字省略号显示
 *   *   *  单行文本溢出显示省略号
         *  多行文本溢出省略号显示

# 精灵图sprites #

精灵图：将多个图片（背景图片、图标等）放在一张图片上，实现一张图片多次利用。

精灵图技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

# 字体图标 #

字体图标：常用于网页中一些不经常更换、通用的小图标。字体图标看上去是图标，但是本质是文字，可以设置`font-size`、`color`等属性，一旦字体加载出来之后，图标马上就会渲染出来，减轻服务器的压力。

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

如何使用：个人比较喜欢[阿里巴巴矢量图标库][Link 1]，进入后**帮助**——**代码应用**可以查看如何使用，这里仅介绍我自己比较喜欢的一种方式。

### Unicode引用 ###

> Unicode引用的特点：
> 
> 1.  兼容性最好，支持IE6+以及所有现代浏览器
> 2.  支持按字体的方式去动态地调整字体大小、颜色等样式
> 3.  因为是字体，不支持多色（五颜六色花里胡哨的字）

Unicode使用步骤：  
第一步：拷贝下面的代码到css样式文件

@font-face { font-family: 'iconfont';
        src: url('iconfont.eot');
        src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
    }

> 注意url的值，一般都需要定位到相应的文件上

第二步：定义iconfont的样式

.iconfont{ 
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

第三步：打开下载文件中的`index.html`，查看相应的字体图标编码并复制，然后将样式应用于标签

# CSS三角做法 #

制作三角的思路：利用盒子边框实现，让其中一边不透明，其余三边都透明（`transparent`）就能实现三角了。

.demo { 
    	width: 0px;
    	height: 0px;
    	line-height: 0;/*兼容低版本浏览器*/
    	font-size: 0;/*兼容低版本浏览器*/
    	border-top: 50px solid red;
    	border-left: 30px solid transparent;
    	border-right: 30px solid transparent;
    	border-bottom: 30px solid transparent;
    }

来看看效果图~  
![CSS三角][CSS]  
比较一下没有加透明色的原图  
![原图][20210407153727786.png]

## CSS三角进阶 ##

.demo { 
    	width: 0;
    	height: 0;
    	border-color: transparent red transparent transparent;
    	border-style: solid;
    	border-width: 22px 8px 0 0;
    }

斜三角制作，效果展示（上面的横线是截图所至，直接忽略）  
![斜三角][2021040716544051.png]

# 解决图片底部空白缝隙 #

先来认识一下`vertical-align`属性，该属性只对行内元素和行内块元素生效

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>baseline</td> 
   <td>默认值，在基线上对齐</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>将元素顶端于行中最高元素的顶端对齐</td> 
  </tr> 
  <tr> 
   <td>middle</td> 
   <td>将元素于最高元素居中对齐</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>把元素的顶端与行中最低元素的顶端对齐</td> 
  </tr> 
 </tbody> 
</table>

一行中各个线的位置说明：  
![各个线的说明][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]  
图片底部有空白缝隙是因为默认是`vertical-align: baseline;`需要改变其样式进行调整改为`vertival-align: bottom;`、`top`、`middle`等。  
![默认样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 1]

# 溢出文字省略号显示 #

### 单行文本溢出显示省略号 ###

直接上CSS样式

.nowrap { 
    	white-space: nowrap;/*强制显示为一行，默认是normal自动换行*/
    	overflow: hidden;/*超出部分隐藏*/
    	text-overflow: ellipsis;/*文本超出部分用省略号代替*/
    }

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

多行文本溢出显示，有较大的兼容性，适用于Webkit内核的浏览器或移动端（移动端大部分是Webkit内核），这个部分推荐让后台来做，后台可以设置显示多少个字

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

[Link 1]: https://www.iconfont.cn/
[CSS]: /images/20221022/d5c6207db77b4238bd3a5e6d9ca6cb1c.png
[20210407153727786.png]: /images/20221022/2b4c154c75254e5cacdb66c0478392a0.png
[2021040716544051.png]: /images/20221022/e428f0319efc490bb66818772512a639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]: /images/20221022/86c46944e9534d9a9c160464bc9af101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 1]: /images/20221022/2d3e1459443143adbe035846c5c335a9.png