小米前端实习面试题和一些经验

最新推荐文章于 2022-11-10 21:03:38 发布

_Terry_

最新推荐文章于 2022-11-10 21:03:38 发布

阅读量3.4k

点赞数 3

分类专栏：前端面试题 js 文章标签：面试题前端

本文链接：https://blog.csdn.net/Terry88_0728/article/details/78081058

版权

本文记录了作者在小米前端实习面试的经历，包括面试中的笔试题和一些经验分享。题目涵盖CSS选择器优先级、clearfix的实现、JavaScript基础知识、布局问题以及CSS单位rem和em的区别。面试中，作者讨论了浮动清除、三列布局的多种实现方式，以及闭包和事件模型等知识点。文章最后提到了其他公司的面试题，如二维数组求最大值和对象拷贝等JS问题。

摘要由CSDN通过智能技术生成

前两天接到了小米的面试邀请，在此之前有个电面，自认为已经初步对小米对前端实习生的要求了解了大概，然后没做过多心里建设准备就去了。（画外音：到了小米，正好赶上当天有许多新员工入职，大厅看起来比较忙碌，拿到码号等了会就有一个很漂亮的小姐姐下来把我带上去了，工作区，不得不说小米的环境布置的超级温馨，对员工的待遇也是很好的很人性化的，不自觉对小米更加了一点向往）
咳咳，言归正传，初试的笔试题已经有些模糊了，（最近忘性有点大）先码了再说
第一题考了对css选择器优先级以及权重的了解
1、输出下列四个选择器的优先级顺序

<div class="red" id="red">
    <span class="red" id="red">color</span>
</div>
<style type="text/css">
    .red #red{
        color:yellow;
    }
    #red .red{
        color:red;
    }
    div .red{
        color:block;
    }
    body .red{
        color:orange;
    }
</style>

这题首先考察了选择器的优先级：HTML标签属性>id选择器>类选择器>元素选择器
而选择器的权重对应下就是：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
在选择器类型相同的前提下，如以上代码前两个选择器权重其实是一样的，是110此时后面的样式就覆盖前面的样式，所以按①②③④来排序的话首先②>①
再看后两个选择器的权重也是相同的为11 但后面的样式覆盖之前的所以④>③
综合起来是②>①>④>③

2、实现一个clearfix（清除浮动）代码：

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visiblity:hidden;
}
.clearfix{
    zoom:1;
}

面试官会就这种题进行深层发问，看你平时是否有爱思考。
比如：content是用来干嘛的，这就看你对伪类了解的是不是够深了，：after一般加在父元素上，为期内容添加后续，content你写个小点或者让他为空都可以，相当于添加一个空的内容
display：block；让他能为块级元素，这样可以设置宽和高，接下来把它的高度height设置为0，visiblity：hidden；内容隐藏掉，再clear：both掉，把前几个兄弟元素加注在父元素上的浮动影响清除掉
最后面试官小姐姐还问我这个zoom是干什么的让他为1和为100有什么不一样吗？这个说实话之前只知道zoom是ie的专有属性主要针对ie6 7有效的修复兼容性问题，可以在清除浮动时起到一定作用其余的确实没多加思考，所以这个没答上来有写尴尬，后来回来网上查了一下，大概是这样的：(下面这部分内容是引用网络资源）

zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。
不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的。

（1）下面我们来看下zoom在非IE浏览器中的作用：看下面的例子，我是在谷歌浏览器下访问的，在该例子中zoom的作用是放大为原来的2倍（读者可以自己尝试缩小操作）

zoom：1时

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 1;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

zoom为2时：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: