1、link引入css和import引入的css的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的。
2、visibility hidden, opacity 0，display none的区别？
- opacity=0：该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
- visibility=hidden：该元素隐藏起来了，但不会改变页面布局，不会触发该元素已经绑定的事件
- display=none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
3、display：table和本身的table有什么区别？
display:table和本身table是相对应的
区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。
之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table边写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁。
4、inline-block、inline和block的区别，为什么img是inline元素还可以设置宽高？
（1）三者的区别：
- Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。
- Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
- Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符
（2）为什么img是inline元素还可以设置宽高？
可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。
什么是可替换元素？
（1）在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
（2）简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
（3）典型的可替换元素有：<iframe><video><embed><img>，还有一些元素在特定情况下是可替换元素，<input>（"image" 类型的 <input> 元素就像<img>一样可替换）
（4）这些元素有一个共性，就是他们的内容都不是通过在标签内添加文本，而是通过某个属性（src、data（<object>）、label（<option>）或js控制（<canvas>））来显示内容的。
（5）textarea、button等并不是可替换元素，他们是浏览器默认的内联块元素。
（3）图片img元素下面有一段空白区域，是因为vertical-align和line-height。
因为img是inline元素，所以会受到vertical-align 和line-height的影响，解决方法就是设置display:block。
5、当margin-top、padding-top的值是百分比时，分别是如何计算的？
题目： 当margin-top、padding-top的值是百分比时，分别是如何计算的？
A 相对父级元素的height，相对自身的height
B 相对最近父级块级元素的height，相对自身的height
C 相对父级元素的width，相对自身的width
D 相对最近父级块级元素的width，相对最近父级块级元素的width
答案： D
** 解析：** 可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）
如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，什么是“流式”的页面：即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。
为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？
CSS权威指南中的解释：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的
height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，
上下外边距因为父元素height的增加也会增加，如此循环。而相比之下，width更加稳定。
6、白屏时间first paint 和可交互时间dom ready的关系是？
先触发first paint，后触发dom ready
页面的性能指标详解：
- 白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止
- 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间
- 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作
- 总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
