阐述 CSS 盒模型原理
CSS盒模型是CSS中最基础的概念之一，它描述了一个元素在网页中的呈现方式。盒模型将一个元素看做是一个矩形盒子，由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。
- 内容区域，也就是元素内部实际显示内容的区域。比如div元素，它的内容区域就是它所包含的文字、图片、列表等内容。
- 内边距区域，它是在内容区域和边框之间的空白区域，它为元素的内容提供空间。可以设置背景颜色、背景图片等样式属性。可以通过设置padding属性来调整内边距的大小。
- 边框区域，它包围着内边距和内容区域，并为元素提供了可见的边界。可以通过设置border属性来调整边框的大小、样式和颜色。
- 外边距区域，它是元素边框与相邻元素边框之间的空白区域。可以通过设置margin属性来调整外边距的大小。
举例阐述 CSS 中几种常用的选择器
- 通配符选择器（Wildcard Selector）：使用
*选择器可以匹配页面上的所有元素。 - 标签选择器（Tag Selector）：使用标签名称作为选择器，例如
div、p、h1，可以选择指定类型的元素。 - ID 选择器（ID Selector）：使用
#加上元素的唯一标识符，例如#myId，可以选择具有指定 ID 的元素。ID 应在页面中是唯一的。 - 类选择器（Class Selector）：使用
.加上类名，例如.myClass，可以选择具有指定类名的元素。多个元素可以共享相同的类。 - 伪类选择器（Pseudo-Class Selector）：使用
:加上伪类名，例如:hover、:first-child，可以选择特定状态或位置的元素。伪类可以根据用户交互或元素的位置进行选择。
具体效果剪文件夹内代码
举例阐述 CSS 几种定位方式
绝对定位（Absolute Positioning）：使用 position: absolute; 将元素的位置相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的窗口进行定位。通过使用 top、bottom、left 和 right 属性，可以精确控制元素在页面上的位置。
- 相对定位（Relative Positioning）：使用
position: relative;将元素相对于其正常位置进行定位。相对定位不会改变其他元素的布局，仍会占据原来的空间。通过使用top、bottom、left和right属性，可以相对于元素的正常位置调整其位置。 - 固定定位（Fixed Positioning）：使用
position: fixed;将元素的位置相对于视口（浏览器窗口）进行定位，无论页面滚动与否，元素都会保持在固定的位置。通过使用top、bottom、left和right属性，可以确定元素在视口中的具体位置。 - 浮动定位（Float Positioning）：使用
float属性将元素从正常的文档流中浮动到指定的位置。浮动元素可以向左或向右浮动，并使其周围的元素环绕在其周围。浮动通常用于创建多列布局。
做一个 CSS 3动画
使用了 CSS 的样式和关键帧动画来实现了一个动画效果，通过定义样式和应用动画属性创建了一个渐变放大和旋转的圆形元素，并在动画结束后以渐变放大的方式显示了一段文字。
linear-gradient()：渐变函数用于创建线性渐变背景。在.circle类的样式中，使用了linear-gradient(45deg, #ff8a00, #e52e71, #4c4c4c)来创建一个从斜角 45 度开始的线性渐变背景。border-radius：用于设置元素的边框圆角。在.circle类的样式中，使用了border-radius: 50%来将元素设置为一个圆形。transform：用于对元素进行变换，例如旋转、缩放、平移等。在.circle和.text类的样式中，使用了transform: translate(-50%, -50%) scale(0)来设置元素的初始位置和大小。animation和@keyframes：这是 CSS3 中用于创建动画的特性。在.circle和.text类的样式中，使用了animation属性来指定动画名称、持续时间、缓动函数和循环次数等。而@keyframes则定义了关键帧动画的不同阶段和样式
