HTML部分

Q:页面导入样式时，使用link和@import有什么区别？
A:区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。
5.import只可以写在内
<style>@import url(css/style.css);</style>

CSS部分

Q:清除浮动的方式有哪些及优缺点？
A:浮动带来的问题是盒子塌陷，什么是盒子塌陷？外部盒子本应该包裹住内部的浮动盒子，结果却没有。
问题出现的原因
父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了。
解决方案

上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离，让它和孩子们见面。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。

在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把 放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素

用overflow:hidden清除浮动
给外部盒子添上这个属性就好了，非常简单。
缺点：有可能造成溢出元素不可见，影响展示效果。

用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它
这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。

题外话

其实还有一种最直接的办法：给每个盒子规定width和height，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

JS

Q:写一个方法把下划线命名转成大驼峰命名
A:

function toCamel(str) {
  str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)
  while(str.match(/\w_\w/)) {
    str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
  }
  return str
}

console.log(toCamel('a_c_def')) // ACDef 

这个是其中一种方法，网路上也有很多的办法，希望大家自己去动手尝试，并且更加完善这一部分代码，这里主要用的是正则匹配和本来自带的toUpperCase()函数，这个在CSS中也很常见，所以在JS中自然也有相类似的方法。如果有想要学正则的话欢迎在下面评论，我会抽空写一天的正则题目来给大家！