前言
今天第一次面试的我无比紧张，面试遇到一个很好的面试官，让人感觉很亲切。当面试官问我的问题不懂时，面试官会让去我百度，了解后再解释给他听，然而百度我也找不到，只能尴尬的说不会，让面试官给我解释这个问题。在面试最后和面试官聊天的过程中也很愉悦，也给了我很好的建议。下面我将给大家介绍我的面试题！
flex：7 1 100px中这三个参数你知道什么意思吗？
下面我们通过例子来解释一下吧！
flex子元素伸缩属性
- 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
1. 扩大情况
<style>
.item {
display: flex;
width: 500px;
height: 100px;
}
.item0 {
width: 50px;
flex: none;
background-color: red;
}
.item1 {
flex: 1 1 50px;
background-color: green;
}
.item2 {
flex: 7 1 100px;
background-color: blue;
}
</style>
<body>
<div class="item">
<div class="item0">0</div>
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
看到上面的效果来分析结果吧
为什么item0设置的是50px，还是50px呢？
为什么item1设置的是50px，怎么变成87.5px呢？
为什么item2设置的是100px，怎么变成362.5px呢？
当空间充足时，flex子项的宽度计算公式是： 自身的基础宽度 + 容器剩余宽度 *（自身伸张比例 / 所有子项伸张比例之和），要注意两种缩写
- flex:none是flex: 0 0 auto的缩写
- flex:num 是flex:numb 1 0%的缩写。如flex：1 => flex: 1 1 0%。
2. 缩小情况
<style>
.item00 {
display: flex;
width:300px;
height: 100px;
}
.item0 {
width:300px;
background-color: red;
}
.item1 {
flex: 1 1 100px;
background-color: green;
}
.item2 {
flex: 2 2 200px;
background-color: blue;
}
</style>
当空间充足不足时，flex子项的宽度计算公式是： 自身的基础宽度 - 超出宽度 *(自身宽度*收缩比例/总权重）
注意flex:num这种缩写写法，展开相当于flex:num 1 0%，此时的flex-basis是0%,不是设置的width；计算总权重时该项的权重为0
将头像边框改为圆？
原来的css样式
修改后的css样式
回答： 长度和宽度相等，border-radius设置为长度（宽度）的一半。因为这个头像的长宽都是32px，所以最合适的就是16px。
遍历嵌套对象
- 方法一
let obj = {
a:{
b:{
c:666
}
}
}
var str = 'a.b.c';
const getData = ()=>{
var newArr = str.split('.').reduce((o,s)=>{ return o[s]},obj)
return newArr
}
console.log( getData());
- 方法二
let obj = {
a:{
b:{
c:666
}
}
}
var str = 'a.b.c';
const getData=(obj,str)=>{
str.split('.').forEach(element =>{
obj= obj[element]
})
return obj;
}
console.log(getData(obj,str));
这道题的重点就是要知道检索对象中包含的值有什么方法。
方法有两种:
- 在
[]后缀中包括住一个字符串表达式的方法 如：obj[a] - 可以使用
.表示法 如：obj.a
其中上面的解法就是采用[]的方法来解决这道题的。
总结
通过这次面试我了解了自己的不足，也从面试官的谈话中得到了许多好的建议。继续加油吧！冲冲冲！
如果遍历嵌套对象更好的方法，可以在评论区下留言哦！大家一起互相学习一番！
最后给大家一个对于项目的建议：最好有一个自己的idea做出来的项目，因为面试官更喜欢从项目里来了解你。
本人大三，正在学习前端知识！
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！