1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
（1）有两种，IE盒子模型，W3C盒子模型；
（2）盒模型：content，padding，border，margin。
（3）区别：IE的content部分把border和padding计算了进去。
2.box-sizing属性？
属性值：border-box（IE盒模型）、content-box（标准盒模型）
3.CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
4.CSS优先级算法如何计算？
优先级（就近原则）：!important > 内联 >id > class > 标签
1.!important声明的样式优先级最高，如果冲突再进行计算。
2.如果优先级相同，则选择最后出现的样式。
3.继承得到的样式的优先级最低。
5、CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
6、display有哪些值？说明他们的作用?
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
flex-弹性盒子
7.position有哪些值？说明他们的作用。
static（默认） 、relative（相对定位) 、absolute(绝对定位 )、fixed(固定定位)
8.CSS3有哪些新特性？
1.RGBA和透明度
2.background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
3.word-wrap（对长的不可分割单词换行）word-wrap：break-word
4.font-face属性：定义自己的字体
5.文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
6.盒阴影：box-shadow: 10px 10px 5px #888888
7.圆角（边框半径）：border-radius 属性用于创建圆角
8.边框图片：border-image: url(border.png) 30 30 round
9.display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
10.解释一下为什么会出现浮动？怎么清除浮动？
为什么出现浮动：浮动元素脱离文档流，不占空间。
1.父元素设置overflow：hidden；
2.设置空标签clear：both；
3.使用伪类
ul:after{
content:"";
display:block;
clear:both;
}
11.rem和em
rem：相对于根节点html的文字大小
em：相对于父级元素字体的大小
12.如何居中div？
1.flex居中
display: flex;
align-items: center;
justify-content: center;
2.定位居中
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
3.css3居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
13.请描述一下cookies sessionStorage localStorage的区别
1.储存方实
cookies在浏览器和服务器之间来回传递
sessionStorage 和 localStorage在浏览器上储存
2.储存大小
cookies数据大小不超或4k
sessionStorage 和 localStorage虽然也有储存大小限制，但是比cookies大的多，可以达到5M或者更大。
3.储存时间
cookies ：过期之前一直有效
sessionStorage：浏览器或者窗口关闭
localStorage：浏览器窗口关闭也不会消失，除非自动删除
14.css3的动画
移动translate
旋转rotate
缩放scale
扭曲skew
15.display:flex的常用方法
X轴方向的排列方式
justify-content: flex-start; 从左到右
justify-content: flex-end; 从右到左
justify-content: center; 居中
justify-content: space-around; 均匀分布（间距不一样）
justify-content: space-evenly; 均匀分布（间距一样）
justify-content: space-between; 均匀分布（左右两边无缝隙）
Y轴方向的排列方式
align-items: flex-start; 顶部对齐
align-items: flex-end; 底部对齐
align-items: center; 居中
align-items: stretch; 子盒子自动拉伸（未设置高度）
align-items: baseline; 文字对齐
修改X轴方向
align-items: baseline; 从左到右
flex-direction: row-reverse; 从右到左
flex-direction: column; 从上到下
flex-direction: column-reverse; 从下到上
flex换行
flex-wrap: wrap; 换行
flex-wrap: nowrap; 不换行
flex-wrap: wrap-reverse; 反向换行
align-content: flex-start; 换行（顺序）
align-content: flex-end; 反向换行（顺序）
align-content: center; 居中（顺序）
align-content: space-between;均匀分布换行
16.css预处理器
主要功能
可以使用变量、常量；
允许css代码嵌套；
混入Mixin；
继承；
函数等功能。
