CSS高级技巧-EW帮帮网

精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

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

核心原理：将网页中的一些小背景图像整合到一张大图中，然后通过 CSS 设置 background-position 属性显示需要的部分。这样服务器只需要一次请求就可以了。

CSS实现精灵图：

backgroud-img：精灵图路径；
background-repeat: 防止背景重复
background：精灵图的图标位置

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3.一旦图片制作完毕想要更换非常复杂。

字体图标 iconfont

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

展示的是图标，本质属于字体。

优点：

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

1. 字体图标的下载

icomoon字库：SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

也可以进行图标选择

阿里iconfont字库： iconfont-阿里巴巴矢量图标库

2. 字体图标的引入

1. 把下载包里面的 fonts 文件夹放入页面根目录下

fonts 文件夹中有四种不同的字体，包含了主流浏览器支持的字体。

2. 在CSS 样式中全局声明字体，在 style.css 文件夹中

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3jjysb');
  src:  url('fonts/icomoon.eot?3jjysb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3jjysb') format('truetype'),
    url('fonts/icomoon.woff?3jjysb') format('woff'),
    url('fonts/icomoon.svg?3jjysb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3. 在demo.html 文件夹中复制我们需要的特殊字体符号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            /* 字体图标的类型名称 */
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?3jjysb');
            src: url('fonts/icomoon.eot?3jjysb#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?3jjysb') format('truetype'),
                url('fonts/icomoon.woff?3jjysb') format('woff'),
                url('fonts/icomoon.svg?3jjysb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        p {
            /* 字体图标的类型名称 ，与@font-face中一致*/
            font-family: 'icomoon';
            /*改变字体图标的大小*/
            font-size: 100px;
            /*改变字体图标的颜色*/
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 字体图标的特殊符号 -->
    <p></p>
</body>

</html>

3. 字体图标的追加

选择 selection.json 文件夹

点击yes

选择需要的图标之后重新进行下载，并替换之前的文件夹。

用户界面样式

鼠标样式 cursor

cursor 属性用于定义鼠标悬停在元素上的样式。

属性值	说明
default	小箭头（默认）
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

将表单的默认蓝色边框去掉

outline：0；
outline：none;

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽的。

resize: none;

vertical-align 属性应用

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

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

属性值	说明
baseline	将元素的基线对齐父容器的基线（默认）
bottom	将元素的底部与父容器的底部对齐
middle	将元素的中线与父容器的中线对齐
top	将元素的顶部与父容器的顶部对齐

    <style>
        .a1 {
            background-color: palevioletred;
            margin-right: 20px;
            display:inline-block
        }
        img {
            width: 100px;
            height: 100px;
        }
        .b1{
            vertical-align: baseline;
        }
        .b2{
            vertical-align: bottom;
        }
        .b3{
            vertical-align: middle;
        }
        .b4{
            vertical-align:top;
        }
    </style>
<body>
    <div class="a1">
        <img src="images/01.gif" class="b1">pppppppp
    </div>
    <div class="a1">
        <img src="images/01.gif" class="b2">pppppppp
    </div>
    <div class="a1">
        <img src="images/01.gif" class="b3">pppppppp
    </div>
    <div class="a1">
        <img src="images/01.gif" class="b4">pppppppp
    </div>
</body>

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

主要解决方法有两种：

1.给图片添加vertical-align:middle | top| bottom等。（提倡使用的）

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

溢出的文字省略号显示

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

            /*1.先强制一行内显示文本*/
            white-space: nowrap;  /* （ 默认 normal 自动换行） */
            /*2.超出的部分隐藏*/
            overflow: hidden;
            /*3.文字用省略号替代超出的部分*/
            text-overflow: ellipsis;

    <style>
        div {
            background-color: palegreen;
            width: 50px;
        }

        .a0 {
            background-color: palevioletred;
        }
        .a0 {
            /*1.先强制一行内显示文本*/
            white-space: nowrap;  /* （ 默认 normal 自动换行） */
            /*2.超出的部分隐藏*/
            overflow: hidden;
            /*3.文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
        }
    </style>
<body>
    <div>xxxxxxxxx</div>
    <div class="a0">xxxxxxxxx</div>
</body>

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

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


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

    <style>
        div {
            width: 50px;
            height: 100px;
            background-color: bisque;
            /* 允许换行 */
            word-wrap: break-word;
        }
        .a {
            background-color: pink;
        }
        .a {
            overflow: hidden;
            text-overflow: ellipsis;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 2;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
<body>
    <div>xxxxxxxxxxxxxxxxxxxxxxxxx</div>
    <div class="a">xxxxxxxxxxxxxxxxxxxxxxxxx</div>
</body>

CSS高级技巧

精灵图