一、link标签和import标签的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。 link方式样式的权重高于@import的。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
二、transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from …. to，而animation可以一帧一帧的。
三、Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
四、BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）
直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
哪些元素会生成BFC：
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为inline-block、table-cell、table-caption，flex，inline-flex的元素
- overflow不为visible的元素
五、垂直居中的方法
(1)margin:auto法
定位为上下左右为0，margin：0可以实现脱离文档流的居中.
(2)margin负值法
margin-top: -190px; /height的一半/
margin-left: -240px; /width的一半/
(3)table-cell（未脱离文档流的）
设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
(4)利用flex
将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
六、说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。
七、position属性比较
固定定位fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。
相对定位relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位Static：
默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
八、浮动清除
方法一：使用带clear属性的空元素
- 在浮动元素后使用一个空元素，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
来进行清理。
方法二：使用CSS的overflow属性
- 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
- 在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
方法三：给浮动的元素的容器添加浮动
- 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
- 什么都不做，给浮动元素后面的元素添加clear属性。
方法五：使用CSS的:after伪元素
- after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的
IEhack 指的是触发 hasLayout。
九、css3新特性
CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。
十、CSS选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。
同一元素引用了多个样式时，排在后面的样式属性的优先级高。
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
十一、怎么样让一个元素消失，讲讲
display:none; visibility:hidden; opacity: 0; 等等
十二、介绍一下盒模型
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（width已经包含了padding和border值）
设置盒模型：box-sizing:border-box
十三、如何实现元素的垂直居中
- 父元素display:flex,align-items:center;
- 元素绝对定位，top:50%，margin-top：-（高度/2）
- 高度不确定用transform：translateY（-50%）
- 父元素table布局，子元素设置vertical-align:center;
十四、calc属性
Calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)；
十五、line-height和height的区别
line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度，
十六、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法？
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排。浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有：
- 添加或者删除可见的DOM元素
- 元素尺寸位置的改变
- 浏览器页面初始化
- 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排
- 减少重绘重排的方法有
- 不在布局信息改变时做DOM查询
- 使用csstext,className一次性改变属性
- 使用fragment
十七、css预处理器有什么
less，sass等
