这是我参与「第五届青训营」伴学笔记创作活动的的第5天 (❤ ω ❤)
前段时间制作名片时借助CSS写了一个头像效果，如今在做项目时突发奇想，便在这里单独写一写创作一个盒模型的思路，积少成多，成为自己日后制作的tips集。
CSS盒模型
在前端学习中，我们经常会使用浏览器的开发者工具，在使用过程中，我们会发现可视化界面会展示出这样一个小盒子。这就是CSS的盒模型，将元素布局所用的各项区域元素展现出来。
这时，我们使用CSS来编辑、填入元素的属性值，把它改造成我们自己想要的样式。
-
width 宽度，取值为长度、百分数、auto
-
百分数：相对于父级容器的width
-
auto 由浏览器根据其它属性确定
⚡容器有指定的宽度时，百分数才生效
-
-
height 高度，取值为长度、百分数、auto
-
百分数：相对于容器的height
-
auto 由浏览器根据其它属性确定
⚡容器有指定的高度时，百分数才生效
-
-
padding 内边距
- 百分数相对于容器的宽度
-
border 边框
- 指定容器边框样式、粗细和颜色，
-
margin 外边距，取值可以是长度、百分数、auto
-
百分数相对于容器宽度
-
🔥margin的合并（margin collapse）
垂直方向上，对于两个相邻且都设置了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
-
-
创建并编辑头像框
我们需要先在需要的页面位置创建一个理想大小的“盒子”，然后为其设定所想要的背景色。
这时我们就要借助linear-gradient函数，来实现我们所需的渐变效果。
- linear-gradient（渐变轴，前侧颜色，后侧颜色）
- 示例： background: linear-gradient(45deg, blue, red);
- 这里表示渐变轴为45度，从蓝色渐变到红色
我之前写的头像框代码是这样的：
linear-gradient(130deg, rgb(133, 182, 238), rgb(13, 78, 153));
结果如图：
然后，我们设置代码 border-radius: 50%;这时盒子将变为圆形。
这时，边框就初具雏形了。我们下一步便要借助CSS关键帧，来实现渐变的动态效果。
在块元素的style中写入animation: image-animation 3s linear infinite;
- 意为对于绑定的关键帧 rotate 在3s内完成一次，这一动作重复无限次(infinite)，动画从头到尾的速度是相同的(linear)。
具体效果 然后在外部划定关键帧
image-animation {
25%{
background-position: right top;
}
50%{
background-position: left top;
}
75%{
background-position: left bottom;
}
100%{
background-position: right bottom;
}
}
这时我们就得到了一个动态的图片。
接着，我们需要在这个块级元素中使用插入图片。
⚡注意，此时img的class需要设置成盒子的class，同时取消父级div的class属性。
如示例所示，我们就制作完成了一个渐变的头像框~
小结
这篇笔记记录了CSS盒模型有关的概念以及属性，然后通过设置盒模型相关的属性、结合CSS动画制作了一个简易的渐变头像框。希望对大家能有所帮助！谢谢观看！
