§ 1.CSS的px，%，em，rem，vh，vw的区别：
在开发移动端的时候，需要适配各种机型，不同的机型的分辨率都是不一样的，我们需要一套代码，去适配不同的机型大小
在index.html文件里的head新增meta标签，width=device-width：
如果不设置width=device-width，移动设备会按照默认视口的宽度去渲染，比如手机是375的屏幕，默认视口可能是800,1000，这样会出现横向滚动条，这样就有问题，所以我们需要设置一下，也就是把我们网页的宽度和设备的宽度是一样的，这样就不会出现横向滚动条以及内容被截断的情况
1.px：
px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变
2.em：
em是相对长度定位，比px更具有灵活性，em的长度是相对于父元素计算的，需要注意的是，em存在继承效果：
1.如果使用em存在继承效果，每个元素都自动继承其父元素的字体大小
2.只要父级元素及上面一直有fontsize为em单位，则会一直继承
3.rem：
rem是css3新引进的一种度量单位，r = root，rem相对于根元素，也就是html的字体大小，比如给html设置一个标准值，比如是font-size为62.5%，那么1rem等于16px，12像素的大小就是12除以16等于0.75rem，14像素的大小就是14除以16等于0.875rem
4.vh / vw：
是指viewport，vh / vw是相对于视口的宽高进行控制的，比如屏幕375px，1wh就是3.75px，这样换算就非常简单
5.%百分比：
百分比是相对于父元素的
补充：
谷歌浏览器默认字体大小是16px，谷歌浏览器字体大小最小为12px，如果想要设置小于12px的字体，可以通过CSS3的transform的scale()，缩放方法来解决
§ 2.说一下CSS权重优先级
!important(无穷大) > 内联样式(1000) > id选择器(100) > 类选择器(属性选择器，伪类选择器)(10) > 标签选择器(伪元素选择器)(1) > 通配符选择器(0) > 继承(0)
§ 3.说一下CSS伪类，伪元素都有哪些
参考：www.w3school.com.cn/css/css_pse…
伪类选择器：
1.动态伪类
:link => 链接没有被访问前的样式效果
:visited => 链接被访问后的样式效果
:hover => 鼠标悬停在元素上面时的样式效果
:active => 点击元素时的样式效果
:focus => 用于元素成为焦点时的样式效果，一般用于表单元素
2.结构伪类
:first-child => 选择某个元素下的第一个子元素
:last-child => 选择某个元素下的最后一个子元素
:nth-child => 选择某个元素下的一个或多个特定的子元素
:nth-last-child => 选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type => 选择指定的元素
:nth-last-of-type => 选择指定的元素，从后往前数
:first-of-type => 选择一个父级元素下的第一个同类型子元素
:last-of-type => 选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child => 选择的元素是其父元素的唯一 一个子元素
:only-of-type => 选择一个元素是上级元素下唯一相同类型的子元素
:empty => 选择的元素里没有任何内容（空标签）
3.否定伪类
:not => 排查或者过滤特定元素
4.状态伪类
:enabled => 选择匹配指定范围内所有可用的UI元素
:disabled => 选择匹配指定范围内所有不可用的UI元素
:checked => 选择匹配指定范围内所有可用的UI元素
5.目标伪类
:target => 选择匹配父元素的所有元素，并且匹配元素被相关URL指向
伪元素选择器：
:after => 在标签里的元素之后插入内容
:before => 在标签里的元素之前插入内容
:first-letter => 选择每个标签里的元素的首字母
:first-line => 选择每个标签里的元素首行
:selection => 选择用户选择的元素部分
§ 4.css布局模型，flex布局有哪些属性？
§ 5.css属性，visibility，display，opacity有什么区别？
visibility：设置为hidden时，元素不可见，但是占位，元素在页面结构中不消失，默认值为visible可见
display：设置为none时，元素不可见，不占位，元素在页面结构中不展示
opacity：通过透明度，来实现元素不可见，为0时则不可见，占位，元素在页面结构中不消失
§ 6.如何用css实现div水平垂直居中，常见一共都有哪几种方法？
1.绝对定位：
父div为position: relative，子div为position: absolute，上右下左各为0，margin为auto
2.子元素相对父元素绝对定位
父div为position: relative，子div为position: absolute，left和right各50%，transform: translate(-50%,-50%)，平移各50%
3.利用绝对定位，calc函数动态计算实现水平垂直居中，缺点是需要知道父元素的宽高，不推荐使用
父div为position: relative，子div为position: absolute，left用calc函数，父div的宽度减去子div的宽度除以2，top用calc函数，父div的高度减去子div的高度除以2
4.flex布局：
父div设置为display:flex，align-items: center，justify-content: center，子div正常宽高
5.grid布局：
父div设置为display:flex，grid-template-columns: 50px，grid-template-rows: 50px，place-content: center center，子div正常宽高
§ 7.用grid布局实现一个九宫格
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
* {margin:0;padding:0;}
.box {
height:300px;
width:300px;
background-color: #ccc;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
gap: 10px;
padding:10px;
box-sizing: border-box;
}
.item {
background-color: #f00;
}
§ 8.CSS的flex简写以及所代表的意思
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器会根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
/* 默认值 */
flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* 不放大、不缩小，但占据固定宽度 */
flex: 0 0 100px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 100px */
/* 简写为 none */
flex: none; /* 等同于 flex: 0 0 auto */
/* 简写为 auto */
flex: auto; /* 等同于 flex: 1 1 auto */
§ 9.CSS如何实现模拟省略号
单行省略号：
.box {
width: 200px; /* 定义宽度 */
white-space: nowrap; /* 保持文本在一行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
多行省略号：
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制显示的行数 */
overflow: hidden;
width: 200px; /* 定义宽度 */
}
§ 10.两个 div margin 重叠，你有什么解决方案
1. 创建 BFC
.box {
width: 300px; height: 200px;
background-color: #f00;
margin: 10px;
float: left; clear: both; /* 必须添加 */
/* 任选其一创建BFC */
display: flow-root;
/* 或 */
overflow: hidden;
/* 或 */
display: inline-block;
}
2. 使用 Flex/Grid 的 gap
.parentbox {
display:flex;
flex-direction: column;
gap: 20px;
}
.box {
width: 300px;
height: 200px;
background-color: #f00;
}
3. 其他扩展方法：
兄弟相邻属性，比如.box + .box，或者每个 div 设置 margin-bottom，在父 div 设置伪元素 last-child > .box margin-bottom为 0
§ 11. css 中有哪些自带的变量
css 中的自定义变量的特点是：
-
以 --开头，通过 var 去使用，通过 var 的第二个属性去设置默认值，比如字体/背景颜色
-
支持全局（:root）和作用域 当前子类中（子元素可以继承父元素的变量）
-
通过 calc 和运算符支持动态计算
-
支持变量在 javascript 动态使用
-
变量灵活嵌套使用，以及伪类/伪元素，动画使用
-
通过@supports (--css: variables) {} 实现兼容性和回退方案
§ 12. 常见的css3动画属性有哪些
CSS3 动画三大核心模块
CSS3动画主要通过以下三个属性集来实现：
过渡 (Transitions)
用途：用于定义元素在不同状态（如悬停、焦点）之间平滑变化的动画效果。通常需要触发。
核心属性：
transition-property： 指定应用过渡的CSS属性（如 all, opacity, transform）。
transition-duration： 过渡持续的时间（如 0.3s）。
transition-timing-function： 过渡的速度曲线（如 ease, linear, ease-in-out, cubic-bezier(...)）。
transition-delay： 过渡开始前的延迟时间。
简写： transition: property duration timing-function delay;(例：transition: all 0.3s ease-in-out;)
变换 (Transforms)
用途：用于改变元素的形状、位置和大小。变换本身是瞬间完成的，但常与过渡或动画结合产生动态效果。
核心属性：
2D变换：
transform: translate(x, y)： 移动。
transform: rotate(angle)： 旋转。
transform: scale(x, y)： 缩放。
transform: skew(x-angle, y-angle)： 倾斜。
3D变换：
transform: translate3d(x, y, z)： 3D空间移动。
transform: rotate3d(x, y, z, angle)： 3D旋转。
perspective： 设置观察者与z=0平面的距离，产生3D景深。
transform-style: preserve-3d： 子元素保留3D位置。
关键帧动画 (Animations)
用途：用于创建更复杂、可自控、可循环的动画序列。无需触发，可自动播放。
核心属性：
定义动画规则：
@keyframes animationName： 定义动画关键帧（from/to或 0%-100%）。
应用动画的属性：
animation-name： 绑定的@keyframes名称。
animation-duration： 动画周期时长。
animation-timing-function： 速度曲线（同transition）。
animation-delay： 动画开始前的延迟。
animation-iteration-count： 播放次数（infinite表示无限循环）。
animation-direction： 播放方向（normal, reverse, alternate, alternate-reverse）。
animation-fill-mode： 动画执行前后如何应用样式（none, forwards, backwards, both）。
animation-play-state： 控制播放状态（running, paused）。
简写： animation: name duration timing-function delay iteration-count direction fill-mode play-state;
