6. CSS(三)

目录

一、盒子模型

(一)网页布局的本质

(二)盒子模型组成

(三)边框(border)

(四)表格的细线边框

(五)内边距(padding)

(六)外边距(margin)

1、外边距的典型应用:

 2、外边距合并:

(1)相邻块元素垂直外边距的合并

(2)嵌套块元素垂直外边距塌陷

 (七)清除内外边距

(八)案例

 (九)总结

二、圆角边框

三、盒子阴影

四、文字阴影


一、盒子模型

页面布局要学习三大核心,盒子模型、浮动和定位

(一)网页布局的本质

网页布局过程:

  • 先准备好相关的网页元素,网页元素基本都是盒子Box
  • 利用CSS设置好盒子样式,然后摆放到相应位置
  • 往盒子里面装内容

网页布局的核心本质:就是利用CSS摆盒子

(二)盒子模型组成

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容

(三)边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色

border : border-width || border-style || border-color

属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型之边框</title><style>div {width: 300px;height: 200px;border-width: 5px;/* 边框的样式,常用的:solid实线边框 dashed虚线边框 dotted点线边框 */border-style: solid;/* border-style: dashed; *//* border-style: dotted; */border-color: pink;}</style>
</head>
<body><div></div>
</body>
</html>

边框简写:(没有顺序)

border: 5px solid pink;

 边框分开写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型之边框</title><style>div {width: 300px;height: 200px;border-top: 5px solid pink;border-bottom: 10px dashed purple;}</style>
</head>
<body><div></div>
</body>
</html>

 边框会影响盒子的实际大小:

边框会额外增加盒子的实际大小,因此有两种方案解决:

  • 测量盒子大小的时候,不量边框
  • 如果测量的时候包含了边框,则需要width/height减去边框宽度

(四)表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法: border-collapse: collapse; 

  • collapse单词是合并的意思
  • border-collapse: collapse; 表示相邻边框合并在一起
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格案例</title><style>table {width: 500px;height: 200px;}th {height: 35px;}table,th,td {border: 1px solid pink;border-collapse: collapse;font-size: 14px;text-align: center;}</style>
</head>
<body><table align="center" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="imgs/down.jpg"/></td><td>345</td><td>123</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td><img src="imgs/down.jpg"/></td><td>124</td><td>675432</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="imgs/up.jpg"/></td><td>212</td><td></td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>4</td><td>东游记</td><td><img src="imgs/up.jpg"/></td><td>23</td><td>7654</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>5</td><td>甄嬛传</td><td><img src="imgs/down.jpg"/></td><td>121</td><td>7676</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>6</td><td>水浒传</td><td><img src="imgs/up.jpg"/></td><td>576576</td><td>1231421</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr><tr><td>7</td><td>三国演义</td><td><img src="imgs/up.jpg"/></td><td>234</td><td>7686</td><td><a href="https://tieba.baidu.com">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">百科</a></td></tr></tbody></table>
</body>
</html>

(五)内边距(padding)

padding属性用于设置内边距,即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型之内边距</title><style>div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;padding-top: 30px;}</style>
</head>
<body><div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>
</body>
</html>

 内边距简写:

padding属性可以有一到四个值

值的个数表达意思
padding: 5px;1个值,代表上下左右都有5px内边距
padding: 5px 10px;2个值,代表上下内边距是5px,左右内边距是10px
padding:5px 10px 20px;3个值,代表上内边距5px,左右内边距10px,下内边距20px
padding:5px 10px 20px 30px;4个值,上5px,右10px,下20px,左30px(顺时针)

内边距会影响盒子的实际大小

当给盒子指定padding值后,

  • 内容和边框有了距离,添加了内边距
  • padding影响了盒子的实际大小

也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。

解决方案:如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可

 也有好处,例如案例-新浪导航栏:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>padding应用-新浪导航栏</title><style>/* 相关取值:1、上边框3像素,颜色为#ff85002、下边框1像素,颜色为#edeef03、盒子高度为41像素,背景颜色为#fcfcfc4、文字颜色为#4c4c4c*/.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {/* a属于行内元素,此时必须转换为行内块元素 */display: inline-block;height: 41px;padding: 0 20px;font-style: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head>
<body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a></div>
</body>
</html>

 内边距不会撑开盒子的情况

如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>padding不会撑开盒子的情况</title><style>h1 {/* 因为有width属性所以会撑大盒子,页面下面出现了水平滚动条*/width: 100%;height: 200px;background-color: pink;padding: 30px;}div {width: 300px;height: 100px;background-color: purple;}div p {/* 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小 *//* width: 100%; */padding: 30px;background-color: skyblue;}</style>
</head>
<body><h1></h1><div><p></p></div>
</body>
</html>

(六)外边距(margin)

margin属性用于设置外边距,即控制盒子和盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写方式代表的意义跟padding完全一致。

1、外边距的典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:

1、盒子必须指定了宽度(width)

2、盒子左右的外边距都设置为auto

常见的写法,以下三种都可以:

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素居中给其父元素添加text-align:center即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>32-外边距的典型应用-块级盒子水平居中</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;/* 行内元素或者行内块元素居中给其父元素添加text-align:center即可 */text-align:center}</style>
</head>
<body><div class="header"><img src="imgs/logo.png" alt=""></div>
</body>
</html>

 2、外边距合并:

 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

(1)相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

 解决方案:尽量只给一个盒子添加margin值

(2)嵌套块元素垂直外边距塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

 解决方案:

①可以为父元素定义上边框

②可以为父元素定义上内边距

③可以为父元素添加overflow: hidden

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距合并-嵌套块元素</title><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* 1、可以为父元素定义上边框 *//* border-top: 1px solid transparent; *//* 2、可以为父元素定义上内边距 *//* padding: 1px; *//* 可以为父元素添加overflow: hidden */overflow: hidden}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

 (七)清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此在布局前,首先要清除下网页元素的内外边距。

* {padding: 0; /* 清除内边距 */margin: 0; /* 清除外边距 */
}

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内元素就可以了。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除内外边距</title><style>* {padding: 0;margin: 0;}span {background-color: pink;margin: 20px;}</style>
</head>
<body>123<ul><li>abcd</li></ul><span>行内元素尽量只设置左右的内外边距</span>
</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>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片的宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因为这个段落没有width属性,所以padding不会撑开盒子的宽度 */padding: 0 28px;/* 因为段落有高度,所以不指定padding值(用padding值后,还要计算很麻烦) */margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head>
<body><div class="box"><img src="imgs/img.jpg" alt=""><p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p><div class="appraise">来自于117384232的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span>99.9元</span></div></div>
</body>
</html>

 (九)总结

1、布局为何用不同的盒子,不能只用div吗?

标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p。

2、为什么用那么多类名?

类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选盒子更容易,后期维护也方便。

3、到底用margin还是padding?

大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。

二、圆角边框

在CSS3中,新增了圆角边框样式,这样盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

语法:border-radius: length;

原理:(椭)圆与边框的交集形成圆角效果

  •  参数值可以为数值百分比的形式
  • 如果是正方形,要想设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%
  • 如果是个矩形,设置为高度的一半就可以做成圆角矩形
  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
  • 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角边框</title><style>.yuan {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50%就是宽度和高度的一半 */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}.radius {width: 200px;height: 200px;background-color: pink;/* border-radius: 10px 20px 30px 40px; */border-radius: 10px 40px;}</style>
</head>
<body>1、圆形<div class="yuan"></div>2、圆角矩形<div class="juxing"></div>3、可以设置不同的圆角<div class="radius"></div>
</body>
</html>

三、盒子阴影

CSS3中新增了盒子阴影,可以使用box-shadow属性为盒子添加阴影。

语法: box-shadow: h-shadow v-shadow blur spread color inset;

描述
h-shadow必须。水平阴影的位置,允许负值。
v-shadow必须。垂直阴影的位置,允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影(outset)改为内部阴影。

 注意:

1、默认的是外阴影(outset),但是不可以写这个单词,否则会导致阴影无效

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>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); */}/* 原先盒子没有影子,当鼠标经过盒子就添加阴影效果 */div:hover {box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);}</style>
</head>
<body><div></div>
</body>
</html>

四、文字阴影

在CSS3中,可以使用text-shadow属性将阴影应用于文本。

语法:text-shadow: h-shadow v-shadow blur color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字阴影</title><style>div {font-size: 50px;color: orangered;font-weight: 700;text-shadow: 5px 5px 6px rgba(0,0,0,.3);}</style>
</head>
<body><div>哈喽呀</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/89931.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android多屏幕支持-Android12

Android多屏幕支持-Android12 1、概览及相关文章2、屏幕窗口配置2.1 配置xml文件2.2 DisplayInfo#uniqueId 屏幕标识2.3 adb查看信息 3、配置文件解析3.1 xml字段读取3.2 简要时序图 4、每屏幕焦点 android12-release 1、概览及相关文章 AOSP > 文档 > 心主题 > 多屏…

【数据结构】栈与队列

1 栈 1.1 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出 LIFO (Last In First Out) 的原则。 压栈&#xff1a;栈…

【Git】

Git 简介下载安装验证安装 简介 Git 是一个分布式版本控制系统&#xff0c;用于跟踪和管理软件开发项目的变化。它可以有效地记录文件的修改历史、协调多人协作开发、解决代码冲突&#xff0c;并提供了分支管理、版本回滚等功能&#xff0c;使团队能够更好地合作开发软件项目。…

Android实现超出固定行数折叠文字“查看全文“、“收起全文“

先上效果图 分析问题 网上有很多关于这个的代码&#xff0c;实现都过于复杂了&#xff0c;github上甚至还看到一篇文章600多行代码&#xff0c;结果一跑起来全是bug。还是自己写吧&#xff01;&#xff01;&#xff01; 如果我们需要换行的"查看全文"、"收起全…

8.14 作业 ARM

.text .globl _gcd_gcd:mov r0,#9mov r1,#15cmp r0,r1 比较r0和r1寄存器中的值beq stopsubhi r0,r0,r1subcc r1,r1,r0stop:b stop .end用for循环实现1~100之间和&#xff1a; .text .globl _start_start:mov r0,#0 总和mov r1,#1 从1开始mov r2,#100 到100结束bl add_loopa…

安装elasticsearch

一、docker安装elasticsearch 1、下载镜像 docker pull elasticsearch:6.5.4 2、启动容器 docker run -p 9200:9200 -p 9300:9300 --name elasticsearch \ -e "discovery.typesingle-node" \ -e "cluster.nameelasticsearch" \ -e "ES_JAVA_OPTS-Xm…

软件测试基础篇——Docker

1、docker技术概述 docker描述&#xff1a;docker是一项虚拟化的容器技术&#xff08;类似于虚拟机&#xff09;&#xff0c;docker技术给使用者提供一个平台&#xff0c;在该平台上可以利用提供的容器&#xff0c;对每一个应用程序进行单独的封装隔离&#xff0c;每一个应用程…

IC人必看| 模拟IC方向面试常考问题及答案汇总(二)

有不少小伙伴说还想要更多模拟IC方向的面试题目&#xff0c;这不就来了&#xff01;&#xff08;文末可领全部面试题目&#xff09; 1. Bandgap 里有几种反馈&#xff1f;原理是&#xff1f; 正反馈和负反馈。 2. 负反馈种类&#xff1f;负反馈的优点&#xff1f; 种类&am…

【深度学习】【风格迁移】Zero-shot Image-to-Image Translation

论文&#xff1a;https://arxiv.org/abs/2302.03027 代码&#xff1a;https://github.com/pix2pixzero/pix2pix-zero/tree/main 文章目录 Abstract1. Introduction相关工作3. Method Abstract 大规模文本到图像生成模型展示了它们合成多样且高质量图像的显著能力。然而&#x…

代码质量检查工具SonarQube

Devops流水线之SonarQube 文章目录 Devops流水线之SonarQube1. 软件功能介绍及用途2. 软件环境搭建与使用2.1 使用方法2.2 SonarQube相关属性说明2.3 Sonar配置文件内容说明 3. 使用环节4. 检查方法 1. 软件功能介绍及用途 SonarQube是一个用于代码质量管理的开源平台&#xf…

网络安全进阶学习第十五课——Oracle SQL注入

文章目录 一、Oracle数据库介绍二、Oracle和MySQL的语法差异&#xff1a;三、Oracle的数据库结构四、Oracle的重点系统表五、Oracle权限分类1、系统权限2、实体权限3、管理角色 六、oracle常用信息查询方法七、联合查询注入1、order by 猜字段数量2、查数据库版本和用户名3、查…

项目知识点记录

1.使用druid连接池 使用properties配置文件&#xff1a; driverClassName com.mysql.cj.jdbc.Driver url jdbc:mysql://localhost:3306/book?useSSLtrue&setUnicodetrue&charsetEncodingUTF-8&serverTimezoneGMT%2B8 username root password 123456 #初始化链接数…

Syncfusion Essential Edit for WPF Crack

Syncfusion Essential Edit for WPF Crack 在任何WPF应用程序中启用语法高亮显示。 Syncfusion Essential Edit for WPF是一款具有所有基本功能的编辑器&#xff0c;如文本编辑、剪切、复制和粘贴。它允许用户从各种文件格式打开文件并将其保存为各种文件格式。Syncfusion Esse…

Streamlit项目: 轻松搭建部署个人博客网站

文章目录 1 前言1.1 探索 Streamlit&#xff1a;轻松创建交互式应用1.2 最全 Streamlit 教程专栏 2 我的个人博客网站已上线&#xff01;2.1 一个集成了智能中医舌诊-中e诊专栏的博客网站2.2 前期准备2.3 使用 Streamlit Cloud 运行 3 知识点讲解3.1 实现多页面&#xff1a;两种…

黑马项目一阶段面试 项目介绍篇

我完成了一个外卖项目&#xff0c;名叫苍穹外卖&#xff0c;是跟着黑马程序员的课程来自己动手写的。 项目基本实现了外卖客户端、商家端的后端完整业务。 商家端分为员工管理、文件上传、菜品管理、分类管理、套餐管理、店铺营业状态、订单下单派送等的管理、数据统计等&…

chatGPT应用于房地产行业

作为 2023 年的房地产专业人士&#xff0c;您无疑认识到技术对行业的重大影响。近年来&#xff0c;一项技术进步席卷了世界——人工智能。人工智能彻底改变了房地产业务的各个方面&#xff0c;从简化管理任务到增强客户互动。 在本文中&#xff0c;我们将探讨几种巧妙的人工智…

命令提示符之操作基础(Windows)

打开命令提示符 方法一 打开指定文件的文件夹&#xff0c;在路径栏里输入“cmd”&#xff0c;回车&#xff0c;就进入控制台了。默认路径就是指定文件夹的路径。 方法二 打开指定的文件夹&#xff0c;按住shift键&#xff0c;在空白处右击&#xff0c;在菜单栏中选择“在此处打…

力扣 322. 零钱兑换

题目来源&#xff1a;https://leetcode.cn/problems/coin-change/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a;题目中说每种硬币的数量是无限的&#xff0c;可以看出是典型的完全背包问题。动规五部曲分析如下&#xff1a; 确定dp数组以及下标的含义…

Synopsys EDA数字设计与仿真

参考如下文章安装Synopsys EDA开发工具 https://blog.csdn.net/tugouxp/article/details/132255002?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132255002%22%2C%22source%22%3A%22tugouxp%22%7D Synopsys EDA工具的结构 下…

面试总结-webpack/git

说说你对webpack的理解 webpack 是一个静态模块打包器&#xff0c;整个打包过程就像是一条生产线&#xff0c;把资源从入口放进去&#xff0c;经过一系列的加工&#xff08;loader&#xff09;&#xff0c;最终转换成我们想要的结果&#xff0c;整个加工过程还会有监控&#x…