§ 1.CSS的px，%，em，rem，vh，vw的区别：
在开发移动端的时候，需要适配各种机型，不同的机型的分辨率都是不一样的，我们需要一套代码，去适配不同的机型大小
在index.html文件里的head新增meta标签，width=device-width：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果不设置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>
<style>
* {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;
}
</style>
§ 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; /* 定义宽度 */
}
