CSS 高级技巧 - 技术栈

精灵图

CSS精灵图（CSS Sprites）是一种网页图片应用处理方式，也称为雪碧图。它允许你将多个小图标或背景图像合并到一张单独的图片中，然后通过CSS的"background-position"属性来定位显示需要显示的图像部分。这种方法的主要目的是减少网页的请求次数，从而加速页面加载速度。

使用CSS精灵图的好处包括：

减少HTTP请求：每一张图片的加载都需要一个HTTP请求，而HTTP请求是网页加载速度的一个瓶颈。通过将多个小图标合并成一张精灵图，可以大大减少HTTP请求的数量，从而提高页面加载速度。
优化缓存：由于精灵图是一张单独的图片，所以浏览器可以更容易地对其进行缓存。这意味着，当用户访问网站的其他页面时，如果那些页面也使用了相同的精灵图，那么图片就可以从缓存中加载，而不需要重新下载。
简化图片管理：通过合并多个小图标到一张图片中，你可以更容易地管理和更新这些图标。

需要注意的是，制作精灵图时需要合理规划图标的位置和大小，以确保它们不会相互重叠，并且易于通过CSS进行定位。同时，随着响应式设计和SVG等技术的普及，CSS精灵图的使用逐渐减少，但这些技术并不能完全取代CSS精灵图在某些特定场景下的应用。

一般情况下精灵图都是负值。（网页中坐标：X轴右边走正直，左边走负值，Y轴同理。

html 复制代码

 <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(images/index.png);
            background-position: -182px 0;
        }

        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px auto;
            background: url(images/index.png);
            background-position: -155px -106px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

字体图标

字体图标是一种特殊的字体，它像文字一样可以通过CSS来控制其大小和颜色，用于显示给用户的图像效果。字体图标的主要优势在于其不会变形、加载速度快，并且由于是矢量图像，可以随意进行缩放而不失真。这使得字体图标在网页设计中非常受欢迎，尤其适合用于显示网页中通用、常用的一些小图标。

字体图标的使用场景非常广泛，前端工程师可以通过字体图标来提供一种方便高效的图标使用方式。由于其轻量级和灵活性的特点，字体图标一旦加载，就能迅速渲染出来，减少了服务器请求。同时，字体图标几乎支持所有的浏览器，具有良好的兼容性。

然而，字体图标并不能完全替代其他图标技术，如精灵技术。它们主要是对工作中图标部分技术的提升和优化。对于一些结构和样式比较简单的小图标，使用字体图标是一个很好的选择。但如果遇到一些结构和样式复杂的小图片，可能就需要使用其他技术，如精灵图。

总的来说，字体图标是一种高效、灵活的网页设计元素，能够提升网页的整体视觉效果和用户体验。在使用时，需要根据具体需求和场景来选择合适的图标技术。

优点：

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

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

兼容性：几乎支持所有的浏览器。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。

如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

SVG 图标库和自定义图标字体管理器 ❍ 伊科月亮 (icomoon.io)

iconfont-阿里巴巴矢量图标库

字体图标的使用

1、解压

2、选择fonts文件夹

将fonts文件夹放到网页源文件目录下

3、在css样式中全局声明字体，注意文件路径

打开style.css文件复制红色框选部分

css 复制代码

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

4、字体声明

粘贴到css样式中

5、使用方法

打开demo.html,选择想要使用的图标

复制红色框选的部分

粘贴到 html 中

6、给span声明一个字体

7、显示结果

CSS三角

在CSS中，实现三角形形状有多种方法。以下是一些常见的方法：

使用边框实现三角形 ：

通过设置元素的边框来实现三角形。这种方法利用透明边框和实色边框的组合来创建不同方向和大小的三角形。例如：

css 复制代码

.triangle {  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-bottom: 100px solid red;  
}

这段代码会生成一个红色的上指三角形。

使用clip-path属性实现三角形 ：
clip-path属性允许你创建复杂的裁剪区域，从而只显示元素的一部分。这对于创建三角形非常有用。例如：

css 复制代码

.triangle {  
    width: 100px;  
    height: 100px;  
    background-color: red;  
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  
}

复制代码

这段代码会生成一个红色的等腰直角三角形。

使用transform和伪元素实现三角形 ：
通过旋转伪元素（:before 或 :after）的矩形边框，也可以实现三角形效果。这种方法比较灵活，可以创建各种大小和方向的三角形。

无论使用哪种方法，都需要注意三角形的尺寸和颜色等属性可以通过调整CSS属性来定制。此外，三角形还可以与其他CSS特性（如阴影、渐变等）结合使用，以创建更复杂的视觉效果。

在选择实现三角形的方法时，需要考虑项目的具体需求和目标。不同的方法有不同的优缺点，比如使用边框的方法简单直接，但可能不如clip-path方法灵活；而clip-path方法虽然灵活，但在一些老旧的浏览器中可能不受支持。因此，在实际开发中需要根据情况选择最合适的方法。

三角制作

html 复制代码

<style>
        .box {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

下图制作

html 复制代码

<style>
        .box {
            width: 120px;
            height: 249px;
            background-color: pink;

            position: relative;
        }

        .box span {
            width: 0;
            height: 0;

            /* 为了兼容性 */
            line-height: 0;
            font-size: 0;

            border: 5px solid transparent;
            /* 向上三角 */
            border-bottom-color: pink;

            position: absolute;
            right: 15px;
            top: -10px;

        }
    </style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

CSS用户界面样式

鼠标样式

|-------------|----|
| 属性值 | 描述 |
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |

html 复制代码

<body>
    <ul>
        <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>
    </ul>
</body>

主要配合js使用

取消表单轮廓线

html 复制代码

 <style>
        input {
            /*取消轮廓线*/
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

防止拖拽文本域

html 复制代码

 <style>
        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

vertical-align 属性应用

设置图片或者表单（行内块元素）和文字的垂直对齐。

vertical-align 属性经常用于设置图片或者表单（行内块元素）和文字的垂直对齐。

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

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

图片和文字默认基线对齐

图片与文字底线对齐

css 复制代码

 <style>
        img {
            vertical-align: bottom;
        }
    </style>

图片与文字顶线对齐

css 复制代码

 img {
         

            vertical-align: top;
        }

图片与文字中线对齐

css 复制代码

        img {
         
            vertical-align: middle;

        }

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

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

1.给图片添加vertical-align:middle / top / bottom

html 复制代码

 <style>
        div {
            border: 2px solid red;
        }

        img {
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/猫.jpeg" alt="">Liberty'
    </div>

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

css 复制代码

 img {
            /* vertical-align: bottom; */

            display: block;
        }

溢出文字省略号显示

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

必须满足三个条件

文字显示不开必须强制在一行内显示
white-space: nowrap;

文字溢出的部分隐藏起来
overflow: hidden;

文字溢出部分省略号显示
text-overflow: ellipsis;

html 复制代码

 <style>
        div {
            width: 160px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;

            /* 1.文字显示不开自动换行 */
            /* white-space: normal; */
            /* 2.文字显示不开必须强制在一行内显示 */
            white-space: nowrap;
            /* 3.文字溢出的部分隐藏起来 */
            overflow: hidden;

            /* 4.文字溢出部分省略号显示 */
            text-overflow: ellipsis;

        }
    </style>
</head>

<body>
    <div>
        床前明月光，疑是地上霜。
    </div>
</body>

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

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

css 复制代码

.two {
            width: 160px;
            height: 45px;
            background-color: pink;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

常见布局技巧

1.margin负值的运用

1.解决边框重叠问题

css 复制代码

<style>
        ul li {
            list-style: none;
            width: 150px;
            height: 200px;
            background-color: pink;
            border: 2px solid red;
            float: left;
            
            margin-left: -2px;
        }
    </style>

2.拓展

css 复制代码

<style>
        ul li {
            position: relative;
            list-style: none;
            width: 150px;
            height: 200px;
            background-color: pink;
            border: 2px solid red;

            margin-left: -2px;
            float: left;


        }

        /* ul li:hover {
            1.如果盒子没有定位，则鼠标经过添加相对定位即可
            position: relative;
            border: 2px solid blue;

        } */

        ul li:hover {
            /* 2.如果li都有定位，则利用z-index提高层级 */
            z-index: 1;
            border: 2px solid blue;
        }
    </style>

2.文字围绕浮动元素

步骤

html 复制代码

  <style>
        * {
            margin: 0;
            padding: 0;

        }

        .box {
            width: 300px;
            height: 70px;
            margin: 100px auto;
            background-color: pink;




        }

        .imgs {
            float: left;
            width: 120px;
            height: 60px;
            background-color: red;
            margin: 5px;


        }

        p {
            font-size: 12px;
            padding: 10px;

        }
    </style>
<body>
    <div class="box">
        <div class="imgs"></div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>

    </div>
</body>

3.行内块的巧妙运用

html 复制代码

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            border: none;
            background-color: #fff;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;

        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">下一页&gt;&gt;</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

4.CSS三角强化

原理

直角三角形

css 复制代码

 <style>
        .box {
            width: 0;
            height: 0;
            /* 只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            border-style: solid;
            /* 上边框的宽度要大，右边框宽度稍小，其余不要 */
            border-width: 100px 50px 0 0;
        }
    </style>

css 复制代码

 .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }


        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;

        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;

            /*直角三角形*/
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .org {
            color: gray;
            font-size: 12px;
            text-decoration: line-through;
            margin-left: 5px;
        }
    </style>



</head>

<body>
  
    <div class="price">
        <span class="miaosha">$1690
            <i></i>
        </span>
        <span class="org">$5678</span>
    </div>
</body>