CSS学习笔记Day7----css高级技巧

书立行

已于 2024-05-30 23:21:14 修改

阅读量665

点赞数 8

文章标签：学习笔记 css3 前端 css

于 2024-05-26 15:41:02 首次发布

本文链接：https://blog.csdn.net/primebrake/article/details/139160964

版权

1.精灵图

为什么要用精灵图(css sprite)？

为了减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <!-- 精灵图：为什么需要精灵图？ -->
    <!-- 为了减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术 ，CSS Sprites-->
    <!-- 精灵图的使用核心： -->
    <!-- 1.精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中 -->
    <!-- 2.移动背景图片位置，此时可以使用background-position -->
    <!-- 3.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同 -->
    <!-- 4.因为一般情况下都是往上往左移动，所以数值是负值 -->
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /* 可以连写 */
            background: url(sprites.png) no-repeat -182px 0;
            /* background-position: -182px 0; */
        }
        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px;
            background: url(sprites.png) no-repeat -155px -106px;
        }
    </style>

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

精灵图案例---拼出自己的名字

其中精灵图如下：

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图案例-拼出自己的名字</title>
    <style>
        span {
            display: inline-block;
        }
        .t {
            width: 103px;
            height: 116px;
            background: url(abcd.jpg) no-repeat -366px -410px;
        }
        .x {
            width: 108px;
            height: 113px;
            background: url(abcd.jpg) no-repeat -251px -556px
        }
        .l {
            width: 101px;
            height: 112px;
            background: url(abcd.jpg) no-repeat -5px -276px
        }
    </style>
</head>

<body>
    <span class="t"></span>
    <span class="x"></span>
    <span class="l"></span>
</body>

</html>

效果图如下：

2 字体图标

字体图标inconfont使用场景：主要用于显示网页中通用，常用的一些小图标。字体图标可以为前端工程师提供一种方便高效的图标使用方法，展示的是图标，本质属于字体。

字体图标使用步骤

字体图标的下载：阿里iconfont字库 http://www.iconfont.cn| icommon字库 http://icomoon.io
字体图标的引入：记住把下载以后的字体图标代码后，把fonts的文件夹放到你html文件的同一目录中。然后找到一个名为style.css的文件，复制第一大段到html文件。
字体图标的追加：如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中，把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

3 CSS的三角做法

可以做成一个三角形的效果嘛？

只需要将宽度和高度都设置为0，添加如下代码：

       .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid red;
            border-right: 10px solid blue;
            border-left: 10px solid green;
            border-bottom: 10px solid purple;
        }

但是想要单独做一个三角形，应该要显示如下代码？

       .box2 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-top-color: pink;
            margin: 100px auto;
        }

所以，做一个朝下的三角形，则是将左，右，下的边框都设置为transparent，将上边颜色设置为三角形的本色。

三角制作案例-京东

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角制作-京东效果</title>
    <style>
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span{
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

4 用户界面样式

4.1 鼠标样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css用户界面样式-鼠标样式</title>
    <!-- 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 -->

</head>
<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>
</html>

4.2 取消表单轮廓和防止拖拽文本域

取消表单轮廓是当用户输入内容时，表单默认会显示轮廓边框，不好看。

文本域如果不设置防拖拽，可以让用户随意拖动大小是不妥的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面-取消表单轮廓和防止拖拽文本域</title>
    <style>
        input {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>
    <!-- 1.取消表单轮廓 -->
    <input type="text">
    <!-- 2.防止拖拽文本域 resize-->
    <textarea name="" id=""></textarea>
</body>
</html>

5 vertical-align实现行内块和文字垂直居中

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。就是让行内元素或者行内块元素和文字对齐方式。

vertical-align:baseline | top | middle | bottom，默认是baseline。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align实现行内块和文字垂直居中</title>
    <!-- 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效 -->
    <!-- vertical-align: baseline|top|middle|bottom -->
    <!-- 默认是baseline -->
    <style>
        img {
            vertical-align: top;
            /* vertical-align: middle; */
        }
        textarea {
            outline: none;
            resize: none;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="img.png" alt=""> pink老师不是刘德华
    <textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>
</html>

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

有一个bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。是因为刚开始默认的是基线对齐，改一下对齐方式即可。有两种解决方法：

给图片添加vertical-align（提倡使用）
把图片转换为块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决图片底部默认空白缝隙问题</title>
    <!-- bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
    因为默认是基线对齐，改一下对齐方式即可 -->
    <style>
        div {
            /* 加上边框会有空白缝隙 */
            border: 2px solid red;
        }
        img {
            /* 1.给图片添加vertical-align(提倡使用) */
            /* vertical-align: middle; */
            /* 2.把图片转换为块级元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="img.png" alt="">
    </div>
</body>
</html>

7 溢出的符号省略号显示

7.1 单行文本溢出

必须满足三个条件：

利用white-space:nowrap先强制一行内显示文本
利用overflow:hidden溢出的部分隐藏
利用text-overflow将文字用省略号替换超出部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本溢出显示省略号</title>
    <!-- 必须满足三个条件 -->
    <!-- 1.先强制一行内显示文本 
    white-space: nowrap-->
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 强制一行显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号替换超出部分 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        啥也不说dadadadajjsdada
    </div>
</body>
</html>

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

多行文本溢出显示省略号，有较大的兼容问题，适合webkit浏览器或移动端。

步骤如下：

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

但是推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字。

8 布局技巧

8.1 margin负值巧妙运用

将li标签为例，如果添加了浮动，并且添加边框，他们边框重叠部分会重叠起来，这样的话，边框就变粗了，所以该怎么解决呢？于是想到了利用margin负值巧妙运用，将li进行margin负值移动，达到这种效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值巧妙运用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        ul li:hover {
            /* 1.如果盒子没有定位，则鼠标经过添加相对定位即可 */
            /* 加上相对定位 */
            /* position: relative; */
            /* 单独写下行会有问题，因为margin-left压住了盒子，所以被压住的盒子无法显示全部边框 */
            
            border: 1px solid orange;
            /* 2.如果li有定位，则利用z-index提高层级 */
            z-index: 10;

        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

其中，注意一下hover的注释，会有所启发。

8.2 文字围绕浮动元素巧妙运用

浮动的最初目的是用来环绕文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;

        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;

        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"><img src="img.png" alt=""></div>
    <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
    
</body>
</html>

8.3 行内块的巧妙运用

行内块元素可以一行显示，并且盒子之间本身就有缝隙。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块的巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 给父盒子添加 */
        .box a {
            /* 行内块元素可以一行显示，并且盒子之间本身就有缝隙 */
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            /* 给父盒子添加text-align: center可以让里面的文字都水平居中 */
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .box .prev,.box .next {
            width: 85px;
        }
        .box .current,.box .elp {
            background-color: #fff;
            border: none;
        }
        .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>

</html>

8.4 css三角巧妙运用---制作直角三角形

之前我们会做一个普通三角形，在此基础上，可以做一个直角三角形，步骤如下：

只保留右边的边框有颜色
上边框宽度要大，右边框宽度稍小，其余的边框都为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局技巧-css三角巧妙运用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 将top的尺寸变高,颜色变透明
            border-top: 100px solid transparent;
            /* 将底部取消 */
            /* border-bottom: 0px solid blue; */
            /* 将左边取消 */
            /* border-left: 0px solid red; */
            /* border-right: 50px solid purple; */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大,右边框宽度稍小,其余的边框为0 */
            border-width: 100px 50px 0 0;
        }  
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

以下是利用直角三角形做的一个降价标牌。

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三角巧妙运用</title>
    <style>
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent #fff transparent transparent;
            border-width: 24px 10px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">$1650
            <i></i>
        </span>
        <span class="origin">$5650</span>
    </div>
</body>
</html>

9 CSS初始化

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css初始化</title>
    <style>
        /* 所有标签的内外边距清零 */
        * {
            margin: 0;
            padding: 0
        }
        /* 斜体的文字不倾斜 */
        em,
        i {
            font-style: normal
        }
        /* 去掉li的小圆点 */
        li {
            list-style: none
        }

        img {
            /* border: 0照顾低版本浏览器 如果图片包含了链接会有边框问题 */
            border: 0;
            /* 取消图片底侧有空白缝隙问题 */
            vertical-align: middle
        }

        button {
            /* 当我们鼠标经过button按钮的时候,鼠标变成小手 */
            cursor: pointer
        }

        a {

            color: #666;
            text-decoration: none
        }

        a:hover {
            color: #c81623
        }

        button,
        input {
            /* "\5B8B\4F53"就是宋体的意思,浏览器兼容性问题 */
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        body {
            /* 抗锯齿形 让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        .hide,
        .none {
            display: none
        }
        /* 清除浮动 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }
    </style>
</head>

<body>

</body>

</html>