1、link和@import的区别？

• link属于HTML标签，而@import是CSS提供的。
• 页面被加载时，link会同时被加载，而@import引用的CSS会等到引用它的CSS文件被加载完再加载。
• @import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
• link方式的样式权重高于@import的权重。
• 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2、隐藏页面元素方式总结

• display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
• visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
• overflow:hidden 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• opacity:0 本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
• z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform: scale(0,0) 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

3、em\px\rem区别？

• px：绝对单位，页面按精确像素展示。
• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
• rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

4、伪类和伪元素的区别是什么？

• 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字,主要用于修改元素的样式。当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。通过 p:first-child改变了文本的样式。

• 伪元素 用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有::before和::after。如通过p::before对这段文本添加了额外的元素。

5、position的值， relative和absolute分别是相对于谁进行定位的？

• absolute:生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。
• fixed（老IE不支持）：生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
• relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static：默认值。没有定位，元素出现在正常的流中
• sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出