CSS高级技巧—精灵技术、字体图标、三角、用户界面样式、表单轮廓、vertical-align属性、文字溢出省略

灰太狼 2022-12-19 09:27 9阅读 0赞

# CSS高级技巧 #

### CSS精灵技术 ###

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

精灵图技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大的图片中，移动背景图图片的位置，可以使用background-position，移动距离就是目标图片的x和y坐标，一般往上往左移动，所以一般是负值。使用精灵图的时候要精确测量每个背景图片的大小和位置。

缺点：图片文件比较大；图片本身放大或者缩小会失真；一旦图片制作完成想要更换很复杂。

--------------------

### 字体图标（iconfont） ###

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

字体图标很好的解决了精灵图的缺点。

优点：

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

但是字体图标不能取代精灵技术，只是对工作中图标部分技术的提升和优化。如果遇到一些结构和样式比较简单的小图标，就用字体图标；如果遇到一些结构和样式复杂一点的小图片就用精灵图。

##### 字体图标的下载 #####

1.  icomoon字库 http://icomoon.io
2.  阿里 iconfont字库 http://www.iconfont.cn/

##### 字体图标的引入 #####

1.  把字体图标的fonts文件夹放到页面的根目录下面。
2.  在C SS样式中全局声明字体
    
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.eot?7kkyc2') format('tryetype'),
                url('fonts/icomoon.eot?7kkyc2') format('woff'),
                url('fonts/icomoon.eot?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }

3.打开demo.html找到对应的图标，复制后面的小方框，粘贴到盒子中。给span指定一个字体icomoon。

![在这里插入图片描述][2020110617521177.png_pic_center]

![在这里插入图片描述][2020110617522554.png_pic_center]

##### 字体图标的追加 #####

如果原先的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

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

--------------------

### CSS三角 ###

网页中常见的一些三角形可以使用CSS直接做出来。

![在这里插入图片描述][20201106175322811.png_pic_center]

给一个高度和宽度均为0px的盒子，设置上下左右边框

![在这里插入图片描述][20201106175337616.png_pic_center]

得到如下

![在这里插入图片描述][2020110617535426.png_pic_center]

因此，可以通过一条边框设置颜色，其余三条边框设置透明色来得到三角形。

例如：

.box {
        
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: pink;
    }

得到如下三角形  
![在这里插入图片描述][20201106175427408.png_pic_center]

--------------------

### CSS用户界面样式 ###

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

##### 更改用户的鼠标样式(cursor) #####

li {
        style="cursor: pointer;" }

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

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>小白 默认</td> 
  </tr> 
  <tr> 
   <td>pointer</td> 
   <td>小手</td> 
  </tr> 
  <tr> 
   <td>move</td> 
   <td>移动</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文本</td> 
  </tr> 
  <tr> 
   <td>not-allowed</td> 
   <td>禁止</td> 
  </tr> 
 </tbody> 
</table>

<li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text";>我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>

![在这里插入图片描述][20201106175534432.png_pic_center]  
![在这里插入图片描述][20201106175543833.png_pic_center]  
![在这里插入图片描述][20201106175558181.png_pic_center]  
![在这里插入图片描述][20201106175558172.png_pic_center]  
![在这里插入图片描述][20201106175558174.png_pic_center]

##### 表单轮廓(outline) #####

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

![在这里插入图片描述][20201106175645334.png_pic_center]

input {
        outline: none;}

##### 防止表单域拖拽(resize) #####

防止文本框被拉缩。

textarea {
         resize: none;}

\*文本域<textarea>最好写在一行。

--------------------

### vertical-align属性应用 ###

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字的对齐。【用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效）

语法：

vertical-align : baseline | top |middle |bottom

<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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

图片默认和文字的 基线对齐，因此给图片添加边框，图片下方会有空白空隙，可以改变对齐方式来取消图片下方的空白缝隙（只要不是基线对齐均可）。或者将图片转换为块类元素。

--------------------

### 文字溢出省略 ###

##### 单行文字溢出省略 #####

1.  将要显示的文字强制一行显示
    
        white-space: nowrap;
2.  超出的部分隐藏
    
        overflow: hidden;
3.  文字用省略号替代超出的部分
    
        text-overflow: ellipsis;

##### 多行文本溢出省略 #####

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

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

动端大部分是webkit内核）

[2020110617521177.png_pic_center]: /images/20221120/416eadb9ef2f4da3ab4ce61d48d45068.png
[2020110617522554.png_pic_center]: /images/20221120/2ffb820089e445138588d0f485083eb8.png
[20201106175322811.png_pic_center]: /images/20221120/bcca42acf0cf4ad9a2e8f31b1b538449.png
[20201106175337616.png_pic_center]: https://img-blog.csdnimg.cn/20201106175337616.png#pic_center
[2020110617535426.png_pic_center]: https://img-blog.csdnimg.cn/2020110617535426.png#pic_center
[20201106175427408.png_pic_center]: https://img-blog.csdnimg.cn/20201106175427408.png#pic_center
[20201106175534432.png_pic_center]: https://img-blog.csdnimg.cn/20201106175534432.png#pic_center
[20201106175543833.png_pic_center]: https://img-blog.csdnimg.cn/20201106175543833.png#pic_center
[20201106175558181.png_pic_center]: https://img-blog.csdnimg.cn/20201106175558181.png#pic_center
[20201106175558172.png_pic_center]: https://img-blog.csdnimg.cn/20201106175558172.png#pic_center
[20201106175558174.png_pic_center]: https://img-blog.csdnimg.cn/20201106175558174.png#pic_center
[20201106175645334.png_pic_center]: https://img-blog.csdnimg.cn/20201106175645334.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201106175715308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA==,size_16,color_FFFFFF,t_70#pic_center