前端面试题（HTML/CSS）

（前端面试题大全，持续更新）

1. 常用的块级元素和行内元素有哪些?说说他们的特点？
2. 浮动产生的原因？清除浮动？
3. 说说一下盒模型
4. float和position一起用是什么效果
5. rem用过吗？做不同手机的适配怎么做？
6. script的async有什么用？defer？
7. 给页面注入50万个li怎么做提升性能？
8. 你一般用的MIME类型有哪些？
9. BFC/margin塌陷
10. 说一下伪类？伪元素？
11. fileReader用过吗？base64编码原理？
12. canvas和svg的区别
13. 布局(盒子模型布局，position的布局，flex布局，grid布局)
14. .position包含哪几个值？
15. 画一个圆形，正方形，三角形
16. 屏幕任意显示【2,8】个圆形或正方形，颜色各不相同（拼接）
17. 三列布局，左右两边固定，中间自适应。
18. 浮动布局有哪些特性，BFC具体是什么，渲染有啥区别，IFC?
19. 为啥加了cleat:both 就可以清除浮动，为啥呢(不是问你有啥效果，是原理是啥)
20. 垂直居中(css实现div垂直居中，高是宽的50%，然后左右margin25px/一个矩形，水平垂直居中，且宽高比为 2:1)
21. svg canvas的区别
22. 对h5的语义化的理解
23. 整个页面只有div会有什么问题？？？整个页面只用p有什么问题？？？
24. html里面的meta标签有哪些?
25. 重排和重绘是什么
26. css 动画怎么实现，有哪几种方法
27. css实现进度条
28. 一个模态窗口，要从窗口下面向上弹的动画
29. .H5的新特性，语义化
30. input属性相关，以及怎样做的文件上传
31. transform transition与animation
32. 实现一个单行容器内：左边一行文字，右边一个btn，文字边长过程中，不会把btn挤下去，而是文字超出省略（单行文本溢出，多行文本溢出把代码实现写出来）
33. 页面卡顿
34. 浏览器的渲染过程，Virtual DOM，直接操作DOM的弊端
35. 你有canvas的经验，你可以大概说一下如何实现一个普通canvas的过程吗？可以写一下吗？
36. h5兼容问题
37. list的无限滚动---节流
38. 如何实现在图片被加载之前的占位符一个image，宽高比16:9
39. H5中边框为1px的设置
40. css单位
41. 两种盒模型分别适用于什么情况？
42. 替换元素
43. 虚拟dom的作用
44. 懒加载怎么实现
45. socket.io的原理，也就是websocket(这里讲了一下比较websocket和http的区别)（我觉得可以从跨域，还有服务端主动发起消息，长连接等说）
46. docopte 作用，html5和html的区别
47. display：none能拿到宽度么， 用jquery呢？