侧边栏壁纸
博主头像
沧海月明

解决了什么问题，做了什么优化

  • 累计撰写 149 篇文章
  • 累计创建 33 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录
前端知识

CSS基础知识

FatFish1
FatFish1
2025-01-29 / 0 评论 / 0 点赞 / 41 阅读 / 0 字 / 正在检测是否收录...

CSS简称样式表，它的作用就是美化网页

CSS的概念和基础语法

CSS的基本语法是选择器+声明

例如：

h1{
    color: blue;
    font-size: 12px;
}

这个简单的css语句中：

  • h1：选择器，即这个css可以应用于h1

  • {}中的内容是声明，包括属性名和属性值，每条用分号隔开

css可以直接写在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>
        h3{
            color: blue;
            font-size: 30px;
        }
        p{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h3>标题内容</h3>
</body>
</html>

在这个案例中，使用html添加css，且要定义在<head>标签的<style>标签中，同时css可以添加多条

CSS的引入方式

内联样式

直接以style属性的形式写在标签里面

<body>
    <p style="color: red;font-size: 30px;">内联样式</p>
</body>

这种形式维护成本高，不清晰，每增加一个标签就得重新添加一次

内部样式表

即在<head>标签的<style>标签中定义样式，并且该样式可以应用到所有的选择器标签

<!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>
        p{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>内联样式</p>
</body>
</html>

但是这种场景无法处理跨页面的通用样式，如果有页面跳转，还需要重新复制一份，维护成本也很高

外部样式

外部样式表文件css，以<head>标签中的<link>标签引入，可以做到通用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/cssProduct.css">
</head>
<body>
    <p>首页</p>
    <a href="./cssProductPage.html">点击跳转产品详情</a>
</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>
    <link rel="stylesheet" href="./css/cssProduct.css">
</head>
<body>
    <p>产品详情</p>
    <a href="./cssMainPage.html">返回首页</a>
</body>
</html>
p{
    color: red;
    font-size: 30px;
}

好处在于可以做到css样式通用，且只改变css文件，进而改变所有需要引用的html文件

css的高级语法

选择器

选择器的分类

在关注选择器分类时需要关注选择器的适应对象和优先级，高优先级样式的同名属性会覆盖低优先级同名属性，如果高优先级没有，则去更低优先级找

全局选择器

*{
    color: red;
    font-size: 30px;
}

以*开头，用于匹配所有元素，优先级最低，一般只做一些样式的初始化操作

元素选择器

<p>、<b>、<div>、<a>、<img>、<h1>、<body>等等，所有的标签都可以是选择器

该类型的选择器针对同名标签，就比如上面用过的

p{
    color: red;
    font-size: 30px;
}

这个样式会应用于所有<p>标签

使用元素选择器也可以实现段落内部分字符的匹配，其实是使用的元素嵌套，比如我有一个样式：

*{
    color: red;
    font-size: 30px;
}
p{
    font-size: 15px;
}
span{
    color: blue;
    font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cssfenlei.css">
</head>
<body>
    <h1>首页</h1>
    <p>首页的作用是<span>展示</span>风采</p>
</body>
</html>

任何通过这种嵌套的方式就可以实现“展示”的样式特殊化

这种嵌套的场景，优先生效最近的标签，即就近原则

类选择器

通过对标签指定class属性，并给class属性指定样式实现，标签的class属性没有数量限制，一个class样式也可以给多个标签使用

<body>
    <p class="emo size">我emo了</p>
</body>
.emo{
    color: gray;
    font-size: 100px;
}
.size{
    font-size: 100px;
}

这里要注意的是匹配多种class，是在一个属性里面加空格，而不是写多个class属性

id选择器

使用id属性+#定义样式即id选择器，与类选择器区别在于，id在一个页面中是全局唯一的

<!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>
        #css{
            color: red;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p id="css">测试id选择器</p>
</body>
</html>

需要注意的是，id不能以数字开头

合并选择器

一个样式声明可以有多个选择器匹配规则，适用于多种标签相同样式的场景，减少重复代码

<!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>
        p,h3{
            color: gray;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h3>我是标题</h3>
    <p>我是段落</p>
</body>
</html>

能合并的项目包括标签、类，例如：

.class1,.class2{
    ……
}

选择器的优先级

内联样式>id选择器>类选择器>标签选择器

使用style属性的优先级最高

相同优先级的选择器，后面的覆盖前面的，例如两个class选择器，后执行的把先执行的覆盖

关系选择器

后代选择器

E F{}

选择所有被E包含的F标签

<!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>
        .ul1 .li1{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="ul1">
        <li class="li1">子1</li>
        <li class="li1">子2</li>
        <li class="li1">子3</li>
    </ul>
</body>
</html>

子代选择器

E>F{}

只有直接子代生效

<!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>
        div>p{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>直接子代p</p>
        <ul>
            <li><p>间接子代1</p></li>
            <li><p>间接子代2</p></li>
            <li><p>间接子代3</p></li>
        </ul>
    </div>
</body>
</html>

相邻兄弟选择器

E+F{}

只有E和相邻的第一个F生效

<!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>
        h3+p{
            color: green;
        }
    </style>
</head>
<body>
    <h3>我是大哥</h3>
    <p>我是弟弟</p>
    <p>我是小弟弟</p>
</body>
</html>

需要注意的是：

  • h3上面的不生效，下面的生效

  • h3和p之间不能有其他标签，否则p的格式不生效

字体属性

  • color：颜色，可选写法包括字母、二进制值、RGB表示三类

p{
    color: red;
    color: #ff0000;
    color: rgb(255, 0, 0);
}

  • font-size：大小，单位是px，也有字母表示

    • chrome最小接收就是12px，再小只能缩放了

  • font-weight：粗细

    • 枚举值bold、bolder、lighter

    • 或用数字100-900，其中默认值为400，bold为700

  • font-style：样式，常用的枚举有normal正常，italic斜体

  • font-family：我们正常理解的字体，即微软雅黑、宋体等，默认是微软雅黑

背景属性

五个常用属性：

  • background-color：背景颜色

  • backgroud-image：背景图，可以通过url()函数增加路径，与<a>标签的逻辑一样

  • backgroud-repeat：填充方式

    • 默认值是repeat，即水平、竖直都平铺

    • repeat-x代表水平平铺，repeat-y代表垂直平铺，no-repeat代表不平铺

  • backgroud-size：背景尺寸，它有四种设置方式

    • 固定尺寸：backgroud-size: 50px 150px

    • 比例：background-size: 100% 100%

    • 保存纵横比缩放到覆盖整个区域：background-size: cover ，这里只关心可以覆盖，图片可能会被截断

    • 保持纵横比缩放到适合区域的大小：background-size: contain ，这里更关心图片完整展示，可能会进行repeat

  • backgroud-position：背景渲染位置，也是三种写法：

    • 使用center、left、top、bottom、right五个之两两匹配，进行大概的设置：background-position: center center

    • 使用百分比渲染：background-position: 50% 50% ，50%对应center

    • 使用像素位置进行渲染：background-position: 50px 50px

文本属性

常用的有以下几种：

<!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>
        h3{
            text-align: center;
            text-decoration: line-through;
        }
        .p1{
            text-transform: uppercase;
        }
        .p2{
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <h3>我是标题</h3>
    <p class="p1">I'm an artical</p>
    <p class="p2">我是新段落</p>
</body>
</html>

  • text-align：对齐位置

  • text-decoration：文本装饰

    • underline：下划线

    • overline：上划线

    • line-through：删除线

  • text-transform：文本大小写

    • capitalize：首字母大写

    • uppercase：全部大小

    • lowercase：全部小写

  • text-indent：设置首航缩进

表格属性

常用的包括：

  • 普通边框：使用border属性加普通边框，设置其格式，格式之间使用空格分割

  • 折叠边框：使用border-collapse属性可以设置折叠，即重复的边框合并成一条展示

table,td{
    border: 1px solid red;
    border-collapse: collapse;
}

  • 长宽属性：使用height和width，一般只设置table就可以了

table{
    height: 500px;
    width: 300px;
}

  • 表格内文字位置：使用text-align和vertical-align设置水平和垂直对齐，一般给td设置即可

  • 表格内四个方向占位填充：padding属性，让文字上下左右有指定长度的空隙，效果和对齐差不多，两个值分别代表上下边距和左右边距，padding 10px 50px

    • 使用padding-left、padding-right、padding-bottom、padding-top可以设置四个方向

  • 表格颜色：color

  • 背景色：backgroud-color

td{
    text-align: center;
    vertical-align: bottom;
    background-color: azure;
    color: aqua;
}

CSS设计理念

css设计理念-盒子模型

盒子模型（box-model）是css的一种设计理念

这种设计理念把HTML标签视为一个盒子，每个盒子都有它的外边距（margin）、内边距（padding）、边框（border）、实际内容（content）

在这个盒子里面包裹其他的标签，即盒子内也是其他的盒子

margin和padding的语法是类似的

<!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>
        div{
            width: 100px;
            height: 100px;
            padding: 50px 10px;
            background-color: green;
            border: 5px solid blue;
            margin: 50px 10px;
        }
    </style>
</head>
<body>
    <div>我是内容</div>
    <p>我是段落</p>
</body>
</html>

css3移动端设计理念-弹性盒子模型

是为了适配不同的屏幕尺寸而演进的，是盒子模型的一种优化

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）

  • 通过设置display属性值为flex可以定义弹性容器

  • 通过flex-direction: row|row-reverse|column|column-reverse属性可以控制弹性方向，作用于盒子：

  • 使用justify-content: flex-start|flex-end|center属性可以控制弹性元素在盒子中的上下居中，使用align-item: flex-start|flex-end|center控制左右居中，作用于盒子；

  • 使用flex/flex-grow属性可以设置子元素的权重，作用于子元素设置后会使子元素自己的长宽不生效。

<!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>
        .container{
            width: 500px;
            height: 500px;
            background-color: #555555;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 2;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            flex: 2;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

通过尝试设置flex-direction的值，可以发现三个颜色的盒子变化了其位置，重点关注column值；

通过尝试设置justify-content、align-item的值，发现三个颜色小盒子居中对齐格式变了

最后添加flex后发现子元素长度已经不再生效

文档流

标准文档流和问题

文档流是页面中可显示对象在排列时所占用的位置/空间

例如块元素一般上下摆放，而内联元素一般自左向右

常见的一些设计场景包括：

  • 高矮不齐，底边对齐

  • 空白折叠现象

    • 无论多少个空格、tab、换行都会折叠成一个

    • 如果想让<img>标签之间没有空隙，必须紧密连接

高矮不齐，底边对齐

例如这个场景，文字和图片是底边对齐的

<body>
    <span>我们一起看美女</span>
    <img src="./resource/girl.webp" alt="">
</body>

空格折叠

例如这种多个空格只显示一个的场景

<body>
    <p>大家好，我是      p标签</p>
</body>

图片空隙

正常两个标签换行写，中间是有空隙的

<body>
    <img src="./resource/girl.webp" alt="">
    <img src="./resource/girl.webp" alt="">
</body>

脱离文档流

脱离文档流有浮动、绝对定位、相对定位三种套路，解决标准文档流可能出现的问题

浮动

浮动就是增加一个浮动层放置内容

通过float属性定义向哪个方向浮动，任何元素都可以浮动，浮动方向只有左和右，浮动后的元素可以脱离文档流

什么叫浮动层？其实可以理解为word中图片的在上方覆盖，即两个素材可能变成两层，出现互相压盖

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .container{
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="container"></div>
</body>
</html>

例如这个场景div的覆盖

同时float还可以解决<img>元素的空隙问题：

<body>
    <img style="float: left; width: 200px; height: 200px;" src="./resource/girl.webp" alt="">
    <img style="float: left; width: 200px; height: 200px;" src="./resource/girl.webp" alt="">
</body>

另一个场景是使用<ul>无序列表+float制作横向摆放的导航栏

<!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>
        ul li{
            float: left;
            margin: 0 40px;
            list-style: none;
            
        }
    </style>
</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
    </ul>
</body>
</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>
        .container{
            background-color: gray;
            width: 500px;
        }
        .box{
            background-color: aqua;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

父容器container是根据子容器自动调整高度的，因为三个box都是50，因此父容器会变成150

如果对子容器浮动，这时子容器和父容器已经是两个图层了，container的高度就不会再适配到150了

.box{
    background-color: aqua;
    width: 50px;
    height: 50px;
    float: left;
}

这个时候如果再增加第四个子元素box2，不使用浮动，则container的大小完全由box2决定，且box2会藏到box下面，即3个box的格式跟box2和container完全独立

对于这种问题，可以使用以下几个方案解决：

  • 给父容器增加高度、宽度限定，可以避免父容器 塌陷，然后给非float子元素增加clear属性可以让其不受浮动元素影响，其枚举包括left、right、both，避免受左右浮动影响

  • 给父容器增加overflow: hidden; clear: both; 也可以避免父容器塌陷，非float子元素同样增加clear属性

<!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>
        .container{
            background-color: gray;
            width: 500px;
            overflow: hidden;
            clear: both;
        }
        .box{
            background-color: aqua;
            width: 50px;
            height: 50px;
            float: left;
        }
        .box2{
            background-color: rgb(234, 14, 14);
            width: 50px;
            height: 50px;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

  • 增加父容器的伪对象，也可以解决父容器的问题，子容器还是同上，这种不常用

.container{
    background-color: gray;
    width: 500px;
}
.container::after{
    content: "";
    overflow: hidden;
    clear: both;
}

定位

定位就是通过position属性指定元素放置的位置，可选值包括：

  • relative：相对定位

  • absolute：绝对定位

  • fixed：固定定位

设置定位后可以使用四个值调整：left、right、bottom、top

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            left: 200px;
            top: 100px;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

相对定位和绝对定位是相对于有定位的父级元素确定位置，如果不存在父级，则逐级向上寻找知道顶层文档

这个案例中使用relative和absolute的差异在于box2是否收到了box1的影响，即box1是否在文档流中，下面分别是使用两个的效果：

每个absolute定位都会生成一个层，而浮动只会生成一个浮动层

fixed定位用于随页面滚动但是始终定位的内容，一般页面上只有个别的模块即可

层

css的不同层也有顺序，可以用z-index属性修改其层数，大值会在更上面的层

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 200px;
    top: 100px;
    z-index: 100;
}

CSS3新特性

圆角

border-radius可以设置圆角

div{
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 50px;
}

border-radius可以有多个值，如果有两个值，分别代表左上+右下、右上+左下

阴影

box-shadow属性代表阴影，有四个值：h-shadow v-shadow blur color，分别代表水平阴影、竖直阴影、模糊度、颜色

.shadow{
    width: 125px;
    height: 150px;
    margin: 0 auto;
    box-shadow: 4px 4px 10px rgb(148, 148, 159);
}

其中h-shadow从负值到正值，阴影右左到右便宜越来越多，v-shadow从正值到负值，阴影从右到左偏移越来越多

这样我们做出了一个卡片悬浮的效果

动画

动画的作用是使一个元素从一个样式逐渐变为另一个样式，样式改变的次数是随意的

创建动画

使用@keyframes{}创建动画，然后使用from和to表示从哪个样式变化到哪个样式，使用模板如下：

@keyframes name {
    from|0%{
        css样式
    }
    percent{
        css样式
    }
    to|10%{
        css样式
    }
}

其中：

  • name是动画名称

  • percent是百分比值

@keyframes myAnim {
    0%{
        background-color: red;
    }
    20%{
        background-color: orange;
    }
    40%{
        background-color: yellow;
    }
    60%{
        background-color: yellowgreen;
    }
    80%{
        background-color: blueviolet;
    }
    100%{
        background-color: red;
    }
}

执行动画

使用animation执行动画，其可选值包括：

  • name：设置要执行的动画名称

  • duration：持续时间

  • timing-function：设置动画效果的速率

    • ease：逐渐变慢

    • liner：匀速

    • ease-in：加速

    • ease-out：减速

    • ease-in-out：先加速后减速

  • delay：设置动画开始时间/延迟执行

  • iteration-count：设置动画循环次数，infinite为无限次

  • direction：动画播放方向

    • normal：向前播放

    • alternate：第偶数次向前，奇数次向后播放

  • animation-play-state：动画播放状态，running为播放，pause代表暂停

<!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>
        @keyframes myAnim {
            0%{
                background-color: red;
            }
            20%{
                background-color: orange;
            }
            40%{
                background-color: yellow;
            }
            60%{
                background-color: yellowgreen;
            }
            80%{
                background-color: blueviolet;
            }
            100%{
                background-color: red;
            }
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            animation: myAnim 5s linear 0s infinite normal;
        }
        div:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

分析下这个，首先构造了一个变色动画myAnim

然后在div的css中引用了这个myAnim动画，它的播放周期是5s，播放速度是匀速，不延迟，无限次播放，播放顺序是正向

然后增加了一个div:hover 样式，它的作用是响应鼠标移动到该div上触发的事件，移动上去之后动画播放暂停

使用透明度属性opacity: 0到opacity: 1加上一些阴影效果，与动画搭配可以实现呼吸效果

媒体查询

媒体查询使前端页面在不同终端设备下达到不同效果，根据设备大小自动识别加载不同样式

例如一个300px长宽的div，在电脑上分辨率高，只占一小块，但是到了收手机上分辨率低，就占了很大一块

在vscode创建html后补全代码，会自动带上下面这个标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它<meta>标签作用就是控制等比例缩放，其属性包括：

  • width=device-width ：宽度等于当前设备宽度

  • initial-scale=1.0 ：设置初始缩放比例

  • max-scale=1.0 ：允许用户缩放的最大比例，默认为1

  • user-scalable ：用户是否可以手动缩放，默认为no

使用这个<meta>标签，页面将禁止根据设备的自动缩放，不使用<meta>标签则会使页面根据设备自动缩放

还有一种通过@media主动查询的写法：

<!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>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        @media screen and (max-width: 768px){
            .box{
                background-color: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 996px) {
            .box{
                background-color: purple;
            }
        }
        @media screen and (min-width: 996px) {
            .box{
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

从而实现在768手机、996平板、电脑屏幕上的加载区别

结合媒体查询，配合css中的display: none属性可以实现在电脑、平板、手机上显示的差异

雪碧图

例如表情包，种类很多，如果页面上要做一个评论功能，总不能我用哪个表情包都要搞一次网络加载，这样效率很低

常见的方案是把所有表情包封装在一张图里面一次性加载，然后用到哪个就加载哪个

这个方案就叫雪碧图/精灵图：CSS sprite

它的作用就是允许将网页中零散的图片包含进一张大图，减少加载开销，提升性能

雪碧图的原理如下：

  • 通过background-image属性引入背景图片

  • 通过background-position属性把图片修改到对应位置

看下面这个案例：

<!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>
        .icon1{
            display: block;
            width: 50px;
            height: 65px;
            background-image: url(./resource/表情包.jpg);
        }
        .icon2{
            display: block;
            width: 50px;
            height: 65px;
            background-image: url(./resource/表情包.jpg);
            background-position: -50px 0;
        }
    </style>
</head>
<body>
    <span class="icon1"></span>
    <span class="icon2"></span>
</body>
</html>

通过一张sprite表情包图片，利用span限定长款，加上位置迁移实现了两个小表情的加载：

  • 首先span是一个行内元素，长宽设置不生效，因此这里要使用display: block 将其修改为块元素

  • 然后两个icon类，分别对应第一个和第二个表情的加载

  • 正常来讲，表情包sprite图的设计是提前搞好的，有明确的大小、间隔数据，这样前端在做移动的时候就非常好开发了

字体图标

字体图标是为了解决用图片展示产生的图片量大、加载慢的问题

此外，如果需要修改样式，例如到了公祭日需要修改为灰色，这时候每个图片修改就非常麻烦，用字体图标就很方便了

常用的字体图标比如阿里的矢量图标库

https://www.iconfont.cn/

使用字体图标的好处在于：

  • 可以使用css直接设置颜色

  • 加载快，减少http网络请求

  • 本质是字体，因此兼容很多新的浏览器

使用iconfont作为css资源的时候，要把图标加入购物车，选择下载代码

这里注意可以把一批矢量图标一起添加到购物车，一起下载，下载下来的源码中包含一个demo_index.html，其中提供了矢量图标的三种用法

以Font Class用法为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-shouye"></span>
</body>
</html>

首先在<head>中增加了<link>标签，引用到iconfont.css文件

然后通过span class设置，引入·iconfont icon-shouye ，即下面这个地方的路径

但是预览图片发现了一个问题，使用span的css设置font-size :50px 并未生效，通过前端页面可以发现：

span css设置的50被其本身的类名覆盖了，可以通过新增类名再次覆盖从而修改其大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .icon{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-shouye icon"></span>
</body>
</html>

同时我们自己通过color属性修改了其颜色

0
HTML
版权归属： FatFish1
本文链接： http://localhost:8090/archives/css
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区