1.什么是盒模型？
盒模型主要分为w3c盒模型和IE盒模型，盒模型主要包括content，padding，border，margin。其中w3c盒模型的width=content，IE盒模型的width=content+padding+border。
2.flex
flex为弹性布局，webkit内核的浏览器必须要加上-webkit前缀，flex容器的属性有六种：
flex-direction：决定主轴的方向，默认重左到右
flex-wrap：决定子元素是否换行，默认不换行
flex-flow：flex-direction和flex-wrap的简写
justify-content：定义项目在主轴的对其方式
align-items：定义项目在交叉轴（副轴）上如何对齐
align-content：定义项目多轴的对齐方式
如何通过flex实现水平垂直居中？
.parent{ display:flex; justify-content:center; align-items:center; }
3.css的单位
px：绝对单位，为css像素
em：相对单位，以父节点字体大小为基准，如果自身设置了font-size，以自身的来计算。
rem：相对单位，以根节点的font-size为基准。
vw：视窗宽度，1vw=1%视窗宽度
vh：视窗高度，1vh=1%视窗高度
vmin：vw和vh中较小的那个
vmax：vw和vh中较大的那个
%：百分比
4.css选择器
ID选择器，类选择器，标签选择器，通用选择器，后代选择器，交集选择器（注：IE7才可以兼容），并集选择器，伪类选择器，子代选择器（注：IE7才可以兼容），序选择器（例：ul li:first-child）(注：IE8才开始兼容)
5.bfc清除浮动
.container{ overflow:auto; } .container::after{ content:""; display:block; clear:left; }
6.层叠上下文
设置z-index
7.媒体查询
@media(max-width：300px){}//当文档宽度小于300px的时候匹配该样式，相应式布局就是根据媒体查询来做的
8.css3新特性2d和3d转换
2D/3d：transform：进行2d转化translate（平面移动），rotate（平面旋转），scale（放大缩小），skew（倾斜），matrix（前面动画的集合）；
translate3d，rotate3d，scale3d
9.css3过渡与动画
过渡：transition：（使用时最好加webkit前缀）
div{ width:100px; height:100px; transition: width 3s;
-webkit-transition：width 3s； } div:hover{ width:300px; }
动画：animation @keyframes
div{ animation: first 5s; -webkit-animation: first 5s; } @keyframes first{ from{background:black;} to{background:blue;} } @-webkit-keyframes first{ from{background:black;} to{background:blue;} }
10.display有哪些取值？
none，inline，block，inline-block，table，inline-table，list-item（li），flex
11.相邻的两个inline-block节点之间为什么会出现间隔如何解决？
1.使用margin负值 2.取消inline-block标签之间的空格
12.css实现宽度自适应100%，宽高为16：9的矩形
<style type="text/css"> *{ margin: 0;padding: 0 } .box{ 100%; } .scale{ 100%; padding-bottom: 56.25%; position: relative; } .item{ 100%; height: 100%; position:absolute; background-color: blue; } </style> <body> <div class="box"> <div class="scale"> <div class="item"></div> </div> </div> </body>
13.画个三角形
div{ width:0; height:0; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid blue; }