├── .gitignore ├── README.md ├── SUMMARY.md ├── book.json ├── interView ├── css │ ├── questions.md │ └── questionsAndAnswers.md ├── html │ ├── questions.md │ └── questionsAndAnswers.md ├── images │ ├── avter.png │ ├── axios-jsonp.png │ ├── bowertourl.jpg │ ├── cell.png │ ├── css-box-shadow.png │ ├── deepCopy.png │ ├── flex-zc.png │ ├── html5.png │ ├── ie.png │ ├── mvc.png │ ├── mvp.png │ ├── mvvm.png │ ├── object-store.png │ ├── request1.png │ ├── request2.png │ ├── shallowCopy.png │ ├── w3c.png │ └── ws.png ├── interView.md ├── javaScript │ ├── questions.md │ └── questionsAndAnswers.md ├── openQuestion │ ├── questions.md │ └── questionsAndAnswers.md ├── projectExperience │ ├── images │ │ ├── flux.jpg │ │ ├── react-diff.png │ │ ├── react-lifecycle.png │ │ ├── sx.jpg │ │ └── sx2.jpg │ ├── questions.md │ ├── questionsAndAnswers.md │ └── react │ │ ├── q.md │ │ └── qa.md └── regular │ ├── questions.md │ └── questionsAndAnswers.md ├── learningFiles ├── css │ ├── css布局.md │ ├── css盒模型.md │ └── images │ │ └── float.png ├── javaScript │ └── callback.md ├── learningFiles.md ├── mix │ ├── images │ │ └── front_end.png │ └── mix.md ├── performance │ └── performanceTuning.md └── regular │ └── regular.md ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | _book/ 2 | node_modules 3 | *.log 4 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前言 2 | 3 | ## 初衷 4 | 5 | 由于网上各种面试资源、学习资料参差不齐，于是想整一个项目，放公共的免费服务器上（eg. github、gitbook），内容是集合大家的力量来分享面试题 面试经验，当然还可以有一些好的学习资源 或链接 等等。 6 | 7 | 还是希望，大家无论参与不参与，都可以把自己经历过的面试，把其中的面试题和面试经验可以分享出来，这才是我的目的。 8 | 9 | 过程是大家整理资料，相互提高的一个过程，目的是提高大家，所以没有能力高低的区分，只有大家共同进步的过程。 10 | 11 | 如果想要参与我们，欢迎告知你的 GitHub 的 userName 或者 email address，开放权限，就可以编辑，欢迎加入我们。 12 | 13 | ## 初步计划 14 | 15 | - 面试题 16 | 17 | 面试题分为以下几部分： HTML、CSS、JavaScript、正则表达式、综合。 18 | 19 | 其中综合部分可能包括：技术上的如：性能优化、个人方面的如：为什么跳槽等 20 | 21 | - 面试经验 22 | 23 | 面试成功，一部分靠实力，另外的就是面试经验了，如果在面试的短短几十分钟的时间内，展现自己最好的一面，就需要面试经验来帮助你。 24 | 25 | - 学习资料（放在后续，如果在整理面试题的过程中看到了，可以先放上） 26 | 27 | ## 本地启动 28 | 29 | - npm install gitbook 30 | - gitbook serve 31 | 32 | ## 网上地址 33 | 34 | - [GitHub 地址](https://github.com/springHyc/InterviewLibrary.git) 35 | - [gitbook 地址](https://www.gitbook.com/book/hyc/interviewlibrary/details) 36 | 37 | ## 参与编辑人员 38 | 39 | - 贺贺，[个人博客](http://blog.csdn.net/u010130282),[简书](http://www.jianshu.com/u/eddf4324a2da) 40 | - hk 41 | 42 | ## 上传个人主页的命令 43 | 44 | ```sehll 45 | `gitbook build` 46 | `git add -f _book` 47 | `git commit -m 'Update the page of project'` 48 | `git subtree push --prefix _book origin gh-pages` 49 | ``` 50 | 51 | ## 开发规则 52 | 53 | 只允许在 master 分支修改与提交! 54 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | - [前言](README.md) 4 | - [纯面试题](interView/interView.md) 5 | 6 | - [JavaScript](interView/javaScript/questions.md) 7 | - [Html](interView/html/questions.md) 8 | - [CSS](interView/css/questions.md) 9 | - [Regular](interView/regular/questions.md) 10 | - [项目经验](interView/projectExperience/questions.md) 11 | - [React](interView/projectExperience/react/q.md) 12 | - [开放题目](interView/openQuestion/questions.md) 13 | 14 | - [面试题+答案](interView/interView.md) 15 | 16 | - [JavaScript](interView/javaScript/questionsAndAnswers.md) 17 | - [Html](interView/html/questionsAndAnswers.md) 18 | - [CSS](interView/css/questionsAndAnswers.md) 19 | - [Regular](interView/regular/questionsAndAnswers.md) 20 | - [项目经验](interView/projectExperience/questionsAndAnswers.md) 21 | - [React 带答案](interView/projectExperience/react/qa.md) 22 | - [开放题目](interView/openQuestion/questionsAndAnswers.md) 23 | 24 | - [学习资料](learningFiles/learningFiles.md) 25 | - [综合](learningFiles/mix/mix.md) 26 | - [Regular](learningFiles/regular/regular.md) 27 | - [css](learningFiles/css/css布局.md) 28 | - [JavaScript] 29 | - [callback](learningFiles/javaScript/callback.md) 30 | - [前端性能优化](learningFiles/performance/performanceTuning.md) 31 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "He he", 3 | "description": "前端面试资料库", 4 | "extension": null, 5 | "generator": "site", 6 | "links": { 7 | "sharing": { 8 | "all": null, 9 | "facebook": null, 10 | "google": null, 11 | "twitter": null, 12 | "weibo": null 13 | } 14 | }, 15 | "output": null, 16 | "pdf": { 17 | "fontSize": 12, 18 | "footerTemplate": null, 19 | "headerTemplate": null, 20 | "margin": { 21 | "bottom": 36, 22 | "left": 62, 23 | "right": 62, 24 | "top": 36 25 | }, 26 | "pageNumbers": false, 27 | "paperSize": "a4" 28 | }, 29 | "plugins": [ 30 | "multipart" 31 | ], 32 | "pluginsConfig": { 33 | "disqus": { 34 | "shortName": "资料库" 35 | } 36 | }, 37 | "title": "前端面试资料库", 38 | "variables": {} 39 | } 40 | -------------------------------------------------------------------------------- /interView/css/questions.md: -------------------------------------------------------------------------------- 1 | # CSS 2 | 3 | > 该文档存放的只是 HTML 部分的问题，其中答案部分放在对应目录下的 questionsAndAnswers.md 文件中，答案部分也只是个人所做的答案，可能存在不正确的地方，欢迎大家共同讨论，找出一个完美的答案。 4 | 5 | > 希望大家能够多学一点知识，能够对面试有所有帮助。 6 | 7 | ## 1. 下面给出的代码你觉得有什么问题吗？ 8 | 9 | ```html 10 |
11 |
left: width: 100px
12 |
中间宽度自定义
13 |
right width: 100px
14 |
15 | 16 | 38 | ``` 39 | 40 | ## 2. css 选择器有哪些？ 41 | 42 | ## 3. 描述一下 CSS 的优先级规则 43 | 44 | ## 4. css 盒模型是什么？ 45 | 46 | ## 5. 实现 div 的动画移动 47 | 48 | ## 6. css 模块化是什么？ 49 | 50 | ## 7. 如何实现一个三列布局，中间固定，两边自适应？ 51 | 52 | ## 8. 如何完成下面的样式？ 53 | 54 | ![](../images/css-box-shadow.png) 55 | 56 | ## 8. 通过 html img 标签设置图片和通过 div 背景图设置图片，两种设置图片的方式有什么优劣？ 57 | 58 | ## 9. 实现一下一个 div 的居中。如果不适用 flex 布局怎么做？ 59 | 60 | ```js 61 |
62 | 72 |
73 |
74 | ``` 75 | 76 | > 必须有 width,`margin: 0 auto`才有效果； 77 | > `top: calc(50% - 50px); position: relative;`是可以上下居中 78 | 79 | ## 10. 普通的实现一下两个`
`横着排列？ 80 | 81 | // -------------------打印分界线----------------------- 82 | 83 | ## 11. 请写出你所知道的清除浮动的方法（代码） 84 | 85 | ## 12. 如何实现一个两栏 布局，左边是 100px 宽，右边自定义？（flex 和非 flex 各实现一个） 86 | 87 | --- 88 | 89 | 网易 90 | 91 | ## 13. 有一个日历组件，如何实现各个屏幕的自适应？ 92 | 93 | ## 14. css3 有代表性的新特性？ 94 | 95 | ## 15. 如何实现动画效果？ 96 | 97 | ## 16. 怎么确定一个块的位置，涉及到 css 的盒模型，以及 DOM api 98 | 99 | ## 17. 伪元素和伪类的区别？说一个常用的伪元素？说一个常用的伪类 100 | 101 | ## 18. `:before`和`:after`的区别？都用来做什么？ 102 | 103 | ## 19. css3 的滤镜听过吗？ 104 | 105 | ## 20. 有个场景：国家发生灾难后，需要将该页面做成灰白色，如何实现？ 106 | 107 | --- 108 | 109 | 搜狗 110 | 111 | ## 21. css 中@import 和``有什么区别？ 112 | 113 | ## 22. 实现一个 img 图片旋转的方法？ 114 | 115 | --- 116 | 117 | 百度-17 年上半年 118 | 119 | ## 23.固定区域内一个图片实现上下垂直居中，图片高度不固定，但是图片高度小于固定区域的高度。 120 | 121 | ## 24. 如何实现下图的布局？ 122 | 123 | ![image.png](https://upload-images.jianshu.io/upload_images/2041009-05dd361d4117558c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 124 | -------------------------------------------------------------------------------- /interView/css/questionsAndAnswers.md: -------------------------------------------------------------------------------- 1 | # CSS  问题答案 2 | 3 | > 下面所有的代码都是个人作答，可能存在理解错误或者答案错误的地方，欢迎大家在[项目下方](https://github.com/springHyc/InterviewLibrary)或者[项目的 issues](https://github.com/springHyc/InterviewLibrary/issues)中留言批评指正。 4 | 5 | ## 1. 下面给出的代码你觉得有什么问题吗？ 6 | 7 | ```html 8 |
9 |
left: width: 100px
10 |
中间宽度自定义
11 |
right width: 100px
12 |
13 | 14 | 36 | ``` 37 | 38 | > 个人答案 39 | 40 | 1. 这样实现不了三栏布局，使用 float 布局的话，中间的 div 会占一行，右侧部分会另起一行展示 41 | 42 | 2. 将中间部分和右侧部分的 html 结构换一下，就可以实现三栏布局，也就是下面这样： 43 | 44 | ```html 45 |
46 |
left: width: 100px
47 |
right width: 100px
48 |
中间宽度自定义
49 |
50 | ``` 51 | 52 | ## 2. css 选择器有哪些？ 53 | 54 | > 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 55 | > "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） 56 | 57 | | 选择器 | 例子 | 例子描述 | CSS | 58 | | ------------------------------------------------------------------------------------------------- | --------------------- | --------------------------------------------------- | --- | 59 | | [._class_](http://www.w3school.com.cn/cssref/selector_class.asp) | .intro | 选择 class="intro" 的所有元素。 | 1 | 60 | | [#_id_](http://www.w3school.com.cn/cssref/selector_id.asp) | #firstname | 选择 id="firstname" 的所有元素。 | 1 | 61 | | [\*](http://www.w3school.com.cn/cssref/selector_all.asp) | \* | 选择所有元素。 | 2 | 62 | | [_element_](http://www.w3school.com.cn/cssref/selector_element.asp) | p | 选择所有

元素。 | 1 | 63 | | [_element_,_element_](http://www.w3school.com.cn/cssref/selector_element_comma.asp) | div,p | 选择所有

元素和所有

元素。 | 1 | 64 | | [_element_ _element_](http://www.w3school.com.cn/cssref/selector_element_element.asp) | div p | 选择

元素内部的所有

元素。 | 1 | 65 | | [_element_>_element_](http://www.w3school.com.cn/cssref/selector_element_gt.asp) | div>p | 选择父元素为

元素的所有

元素。 | 2 | 66 | | [_element_+_element_](http://www.w3school.com.cn/cssref/selector_element_plus.asp) | div+p | 选择紧接在

元素之后的所有

元素。 | 2 | 67 | | [[_attribute_\]](http://www.w3school.com.cn/cssref/selector_attribute.asp) | [target] | 选择带有 target 属性所有元素。 | 2 | 68 | | [[_attribute_=_value_\]](http://www.w3school.com.cn/cssref/selector_attribute_value.asp) | [target=_blank] | 选择 target="\_blank" 的所有元素。 | 2 | 69 | | [[_attribute_~=_value_\]](http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp) | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 | 70 | | [[_attribute_=_value_\]](http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp) | [lang\|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 | 71 | | [:link](http://www.w3school.com.cn/cssref/selector_link.asp) | a:link | 选择所有未被访问的链接。 | 1 | 72 | | [:visited](http://www.w3school.com.cn/cssref/selector_visited.asp) | a:visited | 选择所有已被访问的链接。 | 1 | 73 | | [:active](http://www.w3school.com.cn/cssref/selector_active.asp) | a:active | 选择活动链接。 | 1 | 74 | | [:hover](http://www.w3school.com.cn/cssref/selector_hover.asp) | a:hover | 选择鼠标指针位于其上的链接。 | 1 | 75 | | [:focus](http://www.w3school.com.cn/cssref/selector_focus.asp) | input:focus | 选择获得焦点的 input 元素。 | 2 | 76 | | [:first-letter](http://www.w3school.com.cn/cssref/selector_first-letter.asp) | p:first-letter | 选择每个

元素的首字母。 | 1 | 77 | | [:first-line](http://www.w3school.com.cn/cssref/selector_first-line.asp) | p:first-line | 选择每个

元素的首行。 | 1 | 78 | | [:first-child](http://www.w3school.com.cn/cssref/selector_first-child.asp) | p:first-child | 选择属于父元素的第一个子元素的每个

元素。 | 2 | 79 | | [:before](http://www.w3school.com.cn/cssref/selector_before.asp) | p:before | 在每个

元素的内容之前插入内容。 | 2 | 80 | | [:after](http://www.w3school.com.cn/cssref/selector_after.asp) | p:after | 在每个

元素的内容之后插入内容。 | 2 | 81 | | [:lang(_language_)](http://www.w3school.com.cn/cssref/selector_lang.asp) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个

元素。 | 2 | 82 | | [_element1_~_element2_](http://www.w3school.com.cn/cssref/selector_gen_sibling.asp) | p~ul | 选择前面有

元素的每个