1.BFC是什么？
BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
如何创建一个BFC？
浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display:inline-block，display:table-cell，display:flex，display:inline-flex
overflow指定除了visible的值
具体的可以参考这篇博客，写的很详细：
2.父元素和子元素宽高不固定，如何实现水平垂直居中？
1.弹性盒
父元素设置：display：flex;justify-content:center; align-items:center，子元素可以设置margin：auto；
2.定位加位移
父元素：position：relative.
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)
3.简述选择器~与+的区别
~：匹配多个，可以选择紧跟在当前符合条件元素后面的同级元素
+：只能匹配一个，匹配多个符合条件后面的同级元素。
4.box-sizing对应的盒模型
box-sizing用于更改计算元素的宽度和高度，默认css盒子的
- content-box：遵循w3c原则，盒子的宽度和高度不包括padding和border。
- border-box：盒子的宽度和高度包括padidng和border值
- inherit：是从父容器继承过来的box-sizing值
5.align-items和align-content的区别
- align-items：使用于单行内容，设置的是每一个子项在交叉轴上的默认对齐方式
- align-content：使用于有多行内容的时候，在使用前需要设置flex-wrap：wrap；
表示子元素超出换行，flex容器在交叉轴上有多余空间时，将子项作为一个整体来进行对齐。
详细可以参考以下博客：
6.什么是标准文档流？
标准文档流是元素排版布局过程中，元素会默认自动从左往右，从上往下流式排列方式。当前面内容发生变化，后面的内容也会发生变化。
HTML是一种标准文档流文件。
7.z-index是什么？在position的值什么时候可以触发？
z-index：指的是一个元素在当前文档页面定位时重叠层显示的层级等级，默认是0，数值不限，越大显示层级越高
触发机制：当position的值设置为absolute、relative和fixed的时候才会触发。
8.css3如何实现圆角？
border-radius属性
- 四个值：左上角、右上角、右下角、左下角
- 三个值：左上角、右上角和左下角、右下角
- 两个值：左上角和右下角、右上角和左下角
- 一个值：四个圆角值相同
只需要使用border-radius将四个角设置为合适的尺寸即可实现圆角。
9.css清除浮动的方法
1.在标签尾部添加一个空块级标签，设置样式属性为：clear：both;
缺点：如果页面浮动布局多，就要增加很多的空的div，不利于页面的优化
2.父级定义伪类after和zoom，
.box:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.box{
zoom:1;
}3.父级div定义 overflow:hidden
优点： 简单、代码少、浏览器支持好
缺点： 不能和position配合使用，因为超出的尺寸的会被隐藏。
4.给父级元素单独定义高度（height）
如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。