面经
上来先让介绍一个最近做的项目，然后项目的难点是什么。我说了一个难点，然后又说了一个还在构想没实现的功能。面试小哥哥就跟我探讨了一下怎么去实现，但是感觉我跟他脑回路不太对的上，反正他把我的意思理解错了（不过下来想了想确实他的思路才更清晰）。
说完这个又问有没有做过大一点的很多网页的项目，我说之前跟同学一起做的一个购票网站。然后他问你们项目中网页怎么多，重复的像header和footer这种是怎么去实现的。我说当时就是复制粘贴。他就问你现在有什么其他想法没，我说可以用像webpack这样的构建工具去做一个模板再插入不同的内容（下来查了下也可以用react，vue这些框架的组件去实现）。
然后他就问用过webpack没，我说只是了解各项配置，没有具体去用webpack做过什么项目。
然后问了js的闭包，答完之后还问函数的作用域是定义的时候确认的还是调用的时候。我说定义的时候。他还再三跟我确认，吓得我差点以为自己答错了。
然后是HTTP缓存，又问如果是我的话怎么实现HTTP缓存。
问最近在学什么，这里我有点作死，他打电话前我正在看vue，他一问我就答这个了，但其实我才看了半个小时，问了几个基础点的问题都支支吾吾的，他就下一题了。
然后问为什么做前端吧。我说因为开心啊（是不是听起来不太靠谱哈哈哈(:з」∠)），多说了几句之后又问为什么想来唯品会，我说唯品会电商的话肯定会比较注重性能优化这块吧，我觉得可以学到很多东西。
然后他就问性能优化了，我说了一堆，说完之后他问你刚刚说了用CDN，那你跟我说说CDN吧。
我就说了CDN是什么，干嘛用的。他又让我说原理，这个我就有点蒙蔽了，不知道他到底想问啥。具体的反正也没答上来，然后时间差不多了。他就让我问问题了。
面试题整理
CSS类
CSS盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
position的几种值，相对谁定位，百分比以谁为参照
absolute:绝对定位，相对于static定位以外的第一个父元素进行定位
fixed：绝对定位，相对于浏览器窗口进行定位
relative：相对定位，按照元素的原始位置对该元素进行定位
static：默认值。元素出现在文档流中。
inherit：从父元素继承position属性的值。
百分比以父容器为参照
CSS reset
因为不同核心的浏览器对CSS的解析效果呈现各异，导致所期望的效果跟浏览器的“理解”效果有偏差，css reset就是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”。
有必要重置的元素才写，不要照搬全抄。
CSS放在底部和顶部的区别（？）
css放在顶部；如果放在底部，浏览器构建完DOM树，然后才开始渲染，当渲染树构建完成，又要重新渲染整个页面，造成资源的浪费。
重要的CSS和JS放在顶部，次要的放在底部
（JS放在body和header中的区别）
CSS选择器的优先级
CSS的选择器类型：标签选择器、类选择器、ID选择器、全局选择器、组合选择器、后代选择器、组选择器、继承选择器、伪类选择器、字符串匹配的属性选择器、子选择器、CSS相邻兄弟选择器
!important属性会覆盖任何样式，权重最高
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
后写的样式会覆盖先写的样式
ID选择器是唯一的，不要再在前面写其他选择器了
CSS link和import的区别
，link是html标签，只能放在html源码中。link引入的css文件在页面加载之前完成。
@import url(…) ,import在html和css中都可以使用，相当于一种css样式。import引入的css会在页面加载完成后再加载。（如果写在头部的
lt{ float: left;width:200px; background: #ff0;}
rt{ overflow: hidden; background: #f0f;}
左边左浮动，右边加个margin-left;
lt{ float: left; width:200px; background: #ff0;}
rt{ margin-left: 200px; background: #f0f;}
左边绝对定位，右边加个margin-left;
lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
rt{ margin-left: 200px; background: #f0f;}
左右两边绝对定位，右边加个width,top,left,right
lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
​
左右两边固定，中间自适应，且中间内容优先显示布局的几种方法
第一种：左右两边绝对定位法,中间用margin-left、margin-right；
main{margin:0 200px; overflow: hidden; background: #ccc;}
react面试题较难left{position:absolute; top:0; left: 0;width:200px;background: #ff0;}
right{ position: absolute;top:0; right:0; width:200px; background: #0ff;}
第二种： 中间的盒子绝对定位，左右两边的盒子左右浮动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。