1.box-sizing的两种
第一种(默认):标准盒模型
box-sizing:content-box;
//元素的width=content
第二种:IE盒模型
box-sizing:border-box;
//width=content+border+padding
2.行内/块级元素的区别，以及常见标签
区别：
1.行内元素水平排列，块级元素会自动换行。
2.行内元素宽高为文本宽高（不可以设置），块级元素能自定义宽高。
3.行内元素只能设置水平方向上的margin（-left/-right）,块级元素都可以。
常见行内：span a button img input
常见块级：div p ul li h3
3.flex:1表示什么
flex:1
即:flex-grow:1 , flex-shrink:1 , flex-basis:0%
flex-grow:有剩余空间时扩展。
flex盒子中剩余空间的权重。比如剩余250px的空间，子元素1的grow:2，子元素2的grow:3,则子元素1会增加250×2/(3+2)的空间。
flex-shrink:当空间超出时，进行坍缩。
仅当超出空间时生效，按设置的比例进行收缩。
flex-basis:元素的大小，权重高于width
4.css用link和@import导入的区别
1.link由html提供，@import由css提供。
2.link与页面同时加载，@import要等页面加载结束后加载。
3.@import兼容性要IE5以上。
4.link的权重高于@import。
5.同级相邻元素之间为何有空白
原因：代码中回车空格的影响。
解决：1.父元素中设置font-size:0。
2.元素设置float:left紧贴。
6.有哪几种隐藏元素的方法
1.display:none:元素不可见，不占空间，不响应事件(onclick等)。
2.visibility:hidden:元素隐藏，占空间，不响应事件。
3.opcity:0:不可见，占空间，响应事件。
4.height,width设为0:直接三无
7.css3新特性
1.选择器:兄弟，伪类，伪元素等。
2.新样式:box-shadow,box-radius,background-size等。
3.过渡:transition。
4.动画:animation。
5.转化:transform。
6.布局:flex,grid。
8.硬件加速是什么
将渲染过程交给GPU处理(默认是给渲染器),使animation和transition更加流畅
9.css优化
1.使用紧凑语法。
2.避免重复样式。
3.尽量别使用！important。
4.语义化。
10.css动画与js动画的各自优缺。
| 优点 | 缺点 |
|---|
| css | 浏览器可以自动优化 | 控制弱 |
| 相对简单 | 动画复杂时会显得笨重 |
| 可以自然降级 | 有兼容性·问题 |
| js | 控制强，有多个阶段勾子函数 | 实现起来比css更加复杂 |
| 动画效果更加丰富 | 会干扰线程出现阻塞导致丢帧 |
| 无兼容问题 | |
