1.CSS优先级问题
从低到高为：
- 标签选择器、伪元素选择器：0001
- 类选择器、伪类选择器、属性选择器：0010
- id 选择器：0100
- 内联样式：1000
2,隐藏元素可以有哪些方法
- display:none;
- opacity:0;
- visibility:hidden;
- z-index:负值;
- transform: scale(0,0)
(此处可能会考到display:none与visibility:hidden区别，即是否渲染元素)
3.transition和animation的区别
前者是过渡属性，需要事件触发，后者不需要并且可以循环。
4.那么如何用animation做一个转圈效果(场景题)
<body>
<div class="donut"></div>
</body>
<style>
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #01e1ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
</style>
5.如何做三栏布局
flex或者grid布局 float:left和float:right，中间栏使用margin 使用绝对定位，中间栏使用margin （可能会延伸到float和absolute会脱离文档流以及BFC）
6.说一说flex属性
flex为简写属性，即为flex-grow,flex-shrink和flex-basis的简写。
例子：flex:1即为flex-grow:1；
flex-grow即为该盒子相对其他弹性盒子的增长量
flex-shrink即为该盒子相对其他弹性盒子的收缩量
flex-basis即为盒子的初始长度
7.说一说float
定义一个元素在哪个方向浮动（注意元素会脱离文档流，此处可以展开BFC）
8.那么哪些定位会脱离文档流
- absolute绝对定位；
- float浮动定位；
- fixed固定定位
9.什么是BFC
BFC就是一个相对外界独立的布局环境，布局环境有自己的一套渲染规则且子元素不会影响外部布局。
解决问题：
- margin重叠；
- 清除浮动；
- 自适应多边栏
10.说一说盒子模型
盒子模型分为标准盒子与怪异盒子，其区别在于标准盒子的长宽只包含content，而怪异盒子的长宽包含content、border和padding。可用box-sizing属性配置。
11.重绘与回流
GUI渲染线程会先解析HTML和CSS生成渲染树，然后计算盒子的大小以及位置，这个过程称之为回流，而在回流之后会去渲染盒子，这个过程称之为重绘。
注：由此可得出回流必然会引发重绘。
12.link与import区别
- link是标签，可以被操作dom
- link引入的标签会和HTML一起加载，而import引入的标签会在HTML加载完毕后加载
13.sticky和fixed
sticky并不会脱离文档流，而fixed会； sticky相对于父元素，而fixed相对于根元素
14.px/em/rem/vh/vw/%区别
- px为像素，绝对单位
- em为相对单位，相对于当前元素的文本字体尺寸，默认1em=16px，我们可以使用font-size对父元素配置以调整em
- rem为相对单位，与em不同的是rem是相对于根元素的font-size
- vh,vw为相对单位，分别为相对于窗口的高与宽的百分比比例
- %为相对单位，与vh/vw不同的是他是相对于父元素
15.水平垂直居中怎么做
1.flex或者grid布局下配置
justify-content: center;
align-items: center;
2.利用绝对定位去配置
margin:auto
或者配置
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
16.伪元素和伪类
伪元素用于指定元素的特定部分，而伪类则用于渲染元素的某一特殊状态
常见的伪元素：before/after/first-line/first-letter
常见的伪类：hover/active/visited
那么伪元素有什么优点呢？
由于不会生成DOM，不占用DOM，减少DOM节点；
能用CSS解决的问题绝不用JS，简化开发。
