一、垂直居中，多行文本垂直居中？
1、单行文本垂直居中
设置高度height和行高line-height，使高度height等于行高line-height。
2、多行未知高度文字的垂直居中
设定Padding值，使padding-top等于padding-bottom。
优点：可以在任何浏览器上运行，代码简单。
缺点：仅限于容器高度是可伸缩的情况。
3、多行文本固定高度的居中。
使用三层嵌套的div，假定三个div由外到内的id值分别为wrap、subwrap和content.
对wrap设置 display:table;
对subwrap设置 display:table-cell; vertical-align:middle;
针对IE6/7的兼容性处理：
运用CSS hack——
对wrap设置 *position:relative;
对subwrap设置 *position:absolute;
*top:50%;
对content设置 *position:relative; *top:-50%;
CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
二、如何实现两边固定中间自适应的布局？
1.绝对定位法：左右两侧div采用绝对定位， 中间div的margin-left设为左侧div的宽度， 中间div的 margin-right设为右侧div的宽度。三个div顺序任意。（左右div绝对定位，margin-left,margin-right,三个div顺序任意）
2.浮动法：左侧div左浮动，右侧div右浮动， 中间div的margin-left设为左侧div的宽度， 中间部分的 margin-right设为右侧div的宽度。 左右div顺序任意，中间div必须放在最后。（左右div分别左右浮动，margin-left,margin-right,三个div顺序为左右中）
3.margin负值法：也叫圣杯布局。在中间div外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度为100%。左侧div的margin-left:-100%，右侧div的margin-left:右侧div的宽度的负值。中间div必须放在最前面，左右div顺序任意。
参考博文1参考博文2
三、两列自适应布局
左边固定，右边自适应
1、
左div：固定宽度和左浮动。
右div:margin-left=左边div宽度+两列间距，宽度100%。
<div class="left">left</div>
<div class="main">main</div>
.left {
float: left;
width: 100px;
background:red;
}
.main {
margin-left: 110px;
width: 100%;
background:blue;
}
原理分析：根元素会生成BFC,因此left div和main div的左边会与包含块的border box的左边相接触。因此可以设置main左外边距margin-left为left的宽度。从而使main的content部分处于自适应的可视区。
2、
左div：左浮动，固定宽度。
右div：overflow: hidden;或overflow：auto
.left {
float: left;
width: 100px;
background:red;
}
.main {
overflow: hidden; //或overflow：auto
background:blue;
}
原理分析：根元素会生成BFC,因此left div和main div的左边会与包含块的border box的左边相接触。因为BFC的区域不会和float box重叠，因此可以设置main为overflow:hidden或overflow:auto,使main生成BFC。
右边固定，左边自适应
1、
.main{
width:100%;
float:left;
margin-right:-200px;
background:red;
}
.right{
width:200px;
float:right;
background:blue;
}
原理分析：右边固定宽度，右浮动。左边想自适应屏幕宽度必须设置宽度100%，这时候左边会占满一行。浮动元素被挤到下一行。因此要设置main 为float:left，使main生成BFC,BFC的区域就不会和float box重叠。这时候左边还是占满一整行，并没有给右浮动的区域留位置，因此要设置main margin-right负边距，大小为右边的宽度。
四、清除浮动的方法有哪些？
1.给父级div设置 height：
原理：给父级div设置height值，从而解决父级div无法自动获取高度的问题。
缺点：只适合高度固定的布局。
<style type="text/css">
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/ height:200px;}
.float{float:left;width:200px;height:200px;background:#DDD}
</style>
<div class="superdiv ">
<div class="float">float:left;</div>
</div>
2.在浮动元素后面加空的div标签
原理：在浮动元素后添加一个空div标签，在空div的样式中设置clear:both清除浮动，让父级div能自动获取到高度。
缺点：如果页面浮动布局多，就要增加很多空div标签。
<style type="text/css">
.superdiv{background:#000080;border:1px solid red;}
.float{float:left;width:200px;height:200px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both;}
</style>
<div class="superdiv ">
<div class="float">float:left;</div>
<!--添加空div标签-->
<div class="clearfloat"></div>
</div>
3.给父级div设置伪类：after和zoom
原理：IE8以上和非IE浏览器才支持:after，对父级div的伪类after设置clear:both清除浮动，让父级div能够自动获取高度；zoom(IE专有属性)用于解决ie6,ie7浮动问题 。
<style type="text/css">
.superdiv{background:#000080;border:1px solid red;}
.float{float:left;width:200px;height:200px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clearfloat{zoom:1;}
</style>
<div class="superdiv clearfloat ">
<div class="float">float:left;</div>
</div>
4.给父级div设置 overflow:hidden
原理：使用overflow:hidden时，必须设置父级div的width或zoom:1，同时不能设置height，浏览器会自动检查浮动区域的高度 。
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
<style type="text/css">
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/width:100%;overflow:hidden;}
.float{float:left;width:200px;height:200px;background:#DDD}
</style>
<div class="superdiv ">
<div class="float">float:left;</div>
</div>
5.给父级div设置 overflow:auto
原理：使用overflow:auto时，必须设置父级div的width或zoom:1，同时不能设置height，浏览器会自动检查浮动区域的高度 。
<style type="text/css">
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/width:100%;overflow:auto;}
.float{float:left;width:200px;height:200px;background:#DDD}
</style>
<div class="superdiv ">
<div class="float">float:left;</div>
</div>
追问1：overflow:hidden清除浮动的原理是什么？
四、页面滚动较卡，该怎么优化？
1、防抖
在设定时间内没有连续触发两次scroll事件，才会触发真正想在 scroll 事件中触发的函数。
存在问题：图片懒加载。连续滚动下滑过程中图片不会被加载出来，只有停止下滑时候，图片才被加载出来。
2、节流
即使页面不断被滚动，被连续触发scroll事件，scroll 事件中的函数也可以以固定的频率被触发。
3、简化 scroll 内的操作
将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。避免在scroll 事件中修改样式属性。
4、使用 pointer-events: none 禁止鼠标事件
滑动过程中给 <body> 添加上 pointer-events: none 的样式，禁止鼠标事件，减少了hover和click等鼠标事件的触发，滚动结束之后，再移除该样式。
另外，滚动优化其实不仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发页面渲染的事件。
[【前端性能】高性能滚动 scroll 及页面渲染优化]](http://www.cnblogs.com/coco1s/p/5499469.html)
五、使用css实现一个三角形（盒模型border和css旋转两种方法，主要考察css3旋转）
1、css border
#triangle-up {
width: 0;
height: 0;
/*注意：上色的border必须设置solid才能显示颜色*/
border-left: 60px solid transparent;/*transparent:color值为透明色*/
border-right: 60px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
2、css旋转正方形
1）创建2个嵌套的div。
2）将内部的div旋转45°，获得菱形。
3）将菱形的块向顶部偏移，父级div设置overflow:hidden;
#div1{
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
#div2{
position:absolute;
width:100px;
height:100px;
background:red;
top:-70%;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
<div id="div1">
<div id="div2" class="transform"></div>
</div>
注意：css3旋转需要考虑浏览器兼容性。
.transform {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/*ie7-9要用matrix filter*/
.ie-transform-filter{
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(
M11=0.707,
M12=-0.707,
M21=0.707,
M22=0.707,
SizingMethod='auto expand'
)";
filter:progid:DXImageTransform.Microsoft.Matrix(
M11=0.707,
M12=-0.707,
M21=0.707,
M22=0.707,
SizingMethod='auto expand'
);
}
六、绝对定位与相对定位的区别
relative： 相对定位，相对于自己在文档流中的位置进行偏移，并且原来在文档流中占有的位置得以保留。
absolute；绝对定位，相对于自己向父级元素查找出的第一个带有position属性的元素进行偏移，并且脱离文档流，原来在文档流中所占用的位置不保留。
七、CSS实现矩形按钮右边缘的中间有个往里凹的小半圆，如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.btn {
width: 100px;
text-align: center;
height: 50px;
line-height: 50px;
background: #000;
color: #fff;
position: relative;
}
.btn:after {
position: absolute;
content: '';
width: 30px;
height: 30px;
background: #fff;
top: 10px;
right: -15px;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="btn">
button
</div>
</body>
</html>
参考文献：
CSS实现矩形按钮右边缘的中间有个往里凹的小半圆
八、用css实现九宫格
.wrap{
width:306px;
height:306px;
display:flex;
flex-wrap:wrap;
background:red;
}
.content{
width:100px;
height:100px;
line-height:100px;
text-align:center;
color:white;
border:1px solid white;
background:blue;
}
<div class="wrap">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
关键点：
①外面的包裹的元素设置display:flex和flex-wrap:wrap。
九、css3动画有哪些实现方式？
transform：变换主要实现旋转，缩放，倾斜，移动的2D或3D变形。
Transitions：从一个属性值平滑过渡到另一个属性值。
Animations：通过设置关键帧在页面上产生复杂的动画效果。
十、CSS3的新功能
1、边框
1)圆角 border-radius，IE不支持。
2)图片边框 border-image
2、多背景
向后兼容会是一个很大的问题。
3、@font-face 使用自定义字体
Firefox的最新版本将支持该功能，Safari，Opera甚至IE也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。
4、动画 transform Transitions Animations
5、渐变色 gradient
6、Box阴影
7、RGBa-加入透明色
RGBa中的a代表透明色，IE不支持。
8、文字阴影 text-shadow
9、新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
10、多列布局 multi-column layout
参考文献：
CSS3八大新功能
