用CSS写一个loading – CSS盒模型 | 青训营笔记
前语
这是我参与「第四届青训营」笔记创造活动的的第2天
CSS (Cascading Style Sheet, 层叠款式表)
的入门对新手来说较为友爱，但想要了解和通晓仍是需求进行不少的实践。在字节跳动第四届青训营前端方向的授课中，教师不仅带大家学习了CSS的基础知识，还对CSS的深化内容进行了解说。
我将选取部分笔记、结合个人实践，依据CSS的盒模型制造一个简略的loading动画。
CSS盒模型
打开浏览器的开发者东西，选中款式并将内容下拉，能够看到一个这样的盒子：
这就是CSS的盒模型，最中间的蓝色部分为盒模型的“content”部分，从外到内分别为“margin”、“border”、“padding”、“content”。
在CSS中，把放在页面上的元素当作一个个盒子，能够对盒子的特点进行设置，从而调理元素的款式。
| ⚠️attention！盒模型的特点并不是对一切元素都适用，如width和height特点对行级元素不适用。 |
|---|
盒模型特点
-
width 宽
取值为长度、百分数、auto
- 百分数：相关于容器的width
- auto 由浏览器依据其它特点确定
- 容器有指定的宽度时，百分数才生效
-
height 高
取值为长度、百分数、auto
- 百分数：相关于容器的height
- auto 由浏览器依据其它特点确定
- 容器有指定的高度时，百分数才生效
-
padding 内边距
百分数相关于容器的宽度
-
border 边框
指定容器边框款式、粗细和色彩，如：
#box1 {/*border-width border-style border-color*/border:1px solid black;}也可依据具体方向对指定方向的边进行设置（top、bottom、left、right）
⚠️在制造这一简略的loading动画时，需求对不同方向的边框设置其色彩特点 放置一个“盒子”，将其不同方向的边框设置为不同色彩：
-
margin 外边距
-
取值可所以长度、百分数、auto
-
百分数相关于容器宽度
-
margin的合并（margin collapse）
垂直方向上，关于两个相邻且都设置了margin的元素，两元素间的边距取margin间的最大值
-
盒模型类型
规范盒模型
关于规范盒模型来说，
- width = content宽度
- height = content高度
奇怪盒模型
关于奇怪盒模型来说，
- width = content宽度 + padding + border
- height = content高度 + padding + border
类型挑选
关于挑选规范盒模型仍是奇怪盒模型，能够经过设置特点box-sizing进行规定：
- 规范盒模型：
box-sizing:content-box - 奇怪盒模型：
box-sizing:border-box
该特点的默认值为content-box
loading动画
盒模型的使用
首先设置一个大小适宜的盒子，将其相邻的两条边设置为同一色彩，比方：
-
top和right设置为蓝色：
border-top:20px solid cornflowerblue;border-right:20px solid cornflowerblue; -
bottom和left设置为白灰色：
border-bottom:20px solid whitesmoke;border-left:20px solid whitesmoke;
效果如下：
然后设置盒子的 border-radius 特点，当其设置为 50% 时，可使边框变为圆形：
此时现已能看出loading动画的大致姿态了，下一步是让“盒子”滚动起来。
CSS动画
关于使用CSS生成动画，需求先界说关键帧
关键帧 @keyframes 规则经过在动画序列中界说关键帧（或 waypoints）的款式来操控 CSS 动画序列中的中间步骤。咱们需求让停止的圆形“盒子”滚动一圈，所以关于关键帧能够这样界说：
然后为“盒子”设置 animation 特点：
animation: rotate 600ms infinite linear;
意为关于绑定的关键帧 rotate 在600ms内完结，这一动作重复无限次(infinite)，动画从头到尾的速度是相同的(linear)。
具体效果
下面就是一个制造好的简易loading动画：
小结
这篇笔记记录了CSS盒模型有关的概念以及特点，然后经过设置盒模型相关的特点、结合CSS动画制造了一个简易的loading动画。
假如需求让loading动画依据实践的加载情况进行显现（比方进度条款式的loading），则需求结合JavaScript进行进一步的设计。
2022/7/24
