一、z-index的层级关系及css中的层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。
二、尽量多的水平垂直居中
行内元素：父元素设置display:table-cell;和vertical-align:
middle;以及text-align:center; 快级元素：定位50%，反推50%。 或者父元素设置flex，align-items:
center; justify-content: center; 已知高宽：position:absolute; top: 0;
right: 0; bottom: 0; left: 0; margin: auto;
三、如何触发BFC，以及用法
Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。
1、BFC的布局规则例如以下：
①.内部的盒子会在垂直方向，一个个地放置。
②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。
③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此。
④.BFC的区域不会与float重叠。
⑤.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
⑥.计算BFC的高度时，浮动元素也參与计算。
2、介绍过了BFC的布局规范，再来说说哪些元素会触发BFC。
只要元素满足下面任一条件即可触发 BFC 特性
①.根元素。
②.float的属性不为none。
③.position为absolute或fixed。
④.display为inline-block；table-cell；table-caption；flex。
⑤.overflow不为visible。
3、接下来说说BFC的作用
①、解决margin重叠问题
②、解决浮动高度塌陷问题
③、解决侵占浮动元素的问题
简要介绍IFC
符合以下任一条件即会生成一个IFC，块级元素中仅包含内联级别元素
IFC布局规则：
1 框会从包含块的顶部开始，一个接一个地水平摆放。
2 摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑；
在垂直方向上，这些框可能会以不同形式来对齐：水平的margin、padding、border有效，垂直无效。
不能指定宽高;
3 行框的宽度是 由包含块和存在的浮动来决定;行框的高度 由行高来决定。
四、简单介绍下box-sizing属性
content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
五、css优先级如何计算
!important > 内联 > id > class > tag important 比 内联优先级高，class同级情况下根据class数量叠加计算，还是同级的情况下，写在后面的会覆盖前面的。
六、flex布局的使用及在平时中哪些时候会用到
1、元素的垂直水平居中
2、多列布局
七、display:none和visibility:hidden的区别
1.作用不同 visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无,即在网页中不占任何的位置。
2.使用后HTML元素有所不同 visibility:hidden,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明)…
八、清除浮动的方法
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2、父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
通过触发BFC方式，实现清除浮动
3.使用after伪元素清除浮动（推荐使用）
九、::before和:after中双冒号和单冒号有什么区别
单冒号是伪元素，双冒号是伪类。
十、1像素边框在移动端的实现
1、 box-shadow 方案
利用阴影也可以实现，优点是没有圆角问题，缺点是颜色不好控制
div {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
2、transform: scale(0.5) 方案 - 推荐: 很灵活
3、viewport + rem 方案
该方案是对上述方案的优化，整体思路就是利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。
十一、rem和em区别及使用方法
rem(root element)是参照html的font-size
em(element)是参照父元素的font-size
十二、CSS中哪些属性可以继承？
1、字体系列属性
2、文本系列属性
3、元素可见性
十三、CSS3动画的实现步骤
1、定义动画，关键帧 @keyframe
2、调用动画 animation