1、css自适应方案
场景：两个div，上面固定高度，下面自适应。
<div class="box-fa">
<div class="header">header</div>
<div class="main">main11</div>
</div>
a. 通过计算得到自适应，不需要父div
/* .header {
height: 200px;
background-color: aquamarine;
}
.main {
height: calc(100vh - 200px);
background-color: brown;
} */
b. 使用定位的方案实现自适应
/* .box-fa {
height: 100%;
position: relative;
}
.header {
position: absolute;
height: 200px;
background-color: chartreuse;
width: 100%;
}
.main {
position: absolute;
background-color: chocolate;
width: 100%;
top: 200px;
bottom: 0;
} */
c. 使用flex实现自适应方案
/* .box-fa {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: chocolate;
flex: 0 0 200px;
}
.main {
background-color: cornflowerblue;
flex-grow: 1;
} */
d. 使用grid布局实现自适应方案
/* .box-fa {
display: grid;
grid-template-rows: 200px 1fr;
height: 100%;
}
.header {
background-color: cornflowerblue;
}
.main {
background-color: crimson;
} */
e. 浮动方案实现自适应，没有父div，但只适应于左右布局，不能适用上下布局
.header {
float: left;
width: 200px;
background-color: darkblue;
}
.main {
background-color: darkcyan;
}
f. 百分比法实现自适应，多出来的空间假装看不见不就完事了吗，不建议使用
/* .box-fa {
height: 100%;
overflow: hidden;
}
.header {
height: 200px;
background-color: crimson;
}
.main {
height: 100%;
background-color: cyan;
} */
2、盒子居中方案
场景：使一个固定大小的div居中
<div class="box">
<div class="main"></div>
</div>
a. flex布局的居中方案
.box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main {
height: 100px;
width: 100px;
background-color: aquamarine;
}
b. Grid布局的居中方案
.box {
height: 100%;
display: grid;
justify-content: center;
align-items: center;
}
.main {
height: 100px;
width: 100px;
background-color: #FFFFFF;
}
c. 使用定位的居中方案1，不用外部父元素，transform是html5的特性，兼容性没有其他方法好。
.main {
height: 100px;
width: 100px;
background-color: #FFFFFF;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
d. 使用定位的居中方案2，需要用到外部的box元素，不建议使用
.box {
height: 100%;
position: relative;
}
.main {
height: 100px;
width: 100px;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
e. 使用table-cell的居中方案，注意父级元素的高度和宽度要用vh和vw或者用固定大小，不知道为什么用不了百分比。有一说一不如flex和grid好用
.box {
height: 100vh;
width: 100vw;
display: table-cell;
vertical-align: middle;
}
.main {
height: 100px;
width: 100px;
background-color: #FFFFFF;
margin: auto;
}
3、display，float，position的关系
a. Display为none时，float和position不起作用
b. Position为absolute或fixed时，float不起作用，display部分值会发生改变
c. Float不为none时，display部分值会发生改变
4、display : none;与visibility: hidden;的区别
普通回答：两个属性都是隐藏元素，display：none;被隐藏的元素会在视图中消失，而hidden则会留下元素所占用的空间。
进阶回答：
a. display：none;被隐藏的元素会在视图中消失，而hidden则会留下元素所占用的空间。
b. visibitity具有继承性，父元素设置了hidden子元素也会被隐藏掉。
c. Visibitity:hidden;不会影响计数器的计数，而display:none;则不会被计数器捕捉，如给li标签中设置隐藏时能够体现。
d. Css3的transition支持visibility，不支持display，可以利用隐藏的特性去实现动画的过渡。
e. Display:none;会引起回流和重绘，visibility:hidden;会引起重绘。Ps.什么是回流，什么是重绘，见：https://www.jianshu.com/p/e081f9aa03fb。简单来说，在页面渲染的过程中，如果属性的值发生改变则有可能引起回流和重绘，回流必将重绘，重绘不一定回流。
5、Css有哪些继承属性
a. 字体系列属性，font
b. 文本系列属性，text
c. 元素可见性：visibility
d. 光标属性：cursor
e. 表格布局属性，
f. 列表属性，list
g. 页面样式属性，page
h. 声音样式属性，如speak，
6、Css3新特性
a. 新的选择器
E:nth-child(n)，选择第n个子元素
E:nth-of-type(n)，选择和其一样类型的第n个子元素
E:frist-child(n)，选择第一个子元素
E:frist-of-type(n)，选择和其一样类型的第一个子元素
E:empty，选择没有子元素的每个E元素
E:target等等等等
Input:checked，选择每一个选中的输入元素，这个可能会用上
b. 文本
c. 边框
Border-image，设置边框图片
Border-radius，设置边框的半径
Border-shadow，阴影
d. 背景
Background-size，填充模式
e. 渐变
线性渐变：background:linear-gradient()
径向渐变：background:radial-gradient()
f. 多列布局
g. 过渡
Transition
h. 动画
Animation
i. 2D的转换属性和方法
属性：transform，transform-origin
方法：translate()位移,scale()大小,rotate()旋转,skew()倾斜
j. 3D的转换属性和方法
方法：matrix3d()定义转换，其他都和2D差不多
k. Flex布局
7、简述flex布局
a. flex布局又称为弹性布局，是css3的一个新特性
b. 用来干嘛：自动扩展和收缩布局
c. 有哪些属性：
容器属性：flex-direction,justify-content,align-items,flex-wrap(自动换行),align-content(多行对齐)。
项目属性：order,flex-grow(自适应填充),flex-shrink(缩小比例),flex-basis(占据空间，其实就是在这里定义宽度和高度)
d. 用在那些场景：用flex做自适应方案，盒子居中方案
e. 有什么缺点：兼容性差一点
f. 和什么作比较怎么样：和grid，浮动和定位
