文章/答案/技术大牛

发布

社区首页 >专栏 >前端面试宝典（四）

前端面试宝典（四）

萌兔IT

发布于 2020-11-30 03:29:23

80900

代码可运行

文章被收录于专栏：萌兔it萌兔it

运行总次数：0

代码可运行

Hello小伙伴们，我又来了，来的太不频繁，兔妞也自惭形秽！但是真的是有机会就更新啦～最近烦心事也很多，不过还是要努力开心呀，每天都是愉快的新的一天！

1）要求容器在宽度自由伸缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。

<div class="div1">
  <div class="div2 div">Rabbit1</div>
  <div class="div2 div">Rabbit2</div>
  <div class="div2 div">Rabbit3</div>
</div>

//flex解决办法
.div1{
  width: 100%;
  height: 400px;
  border: 1px solid #888;
  flex-direction: row;
  display: flex;
}
.div{
  flex-grow: 1;
  border: 1px solid #888;
}

.div1{
  width: 100%;
  height: 400px;
}
.div2{
  margin-left:5%;
}
.div{
  width: 30%;
  display: inline-block;
}

快去自己动手敲敲试试吧！

2）元素竖向的百分比是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

3）重绘和重排是什么？怎样减少重排？

重绘
当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
触发重绘的条件：改变元素外观属性。如：color，background-color等。
重排:
页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片等）
改变窗口尺寸
减少重排
分离读写操作
样式集中改变

4）写出清除浮动的方法，及优缺点

额外标签法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
</style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

优点：通俗易懂

缺点：添加额外标签

父级添加overflow属性（触发BFC）

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

使用after伪类元素清除浮动

<div class="fahter clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
    <!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

‍优点：结构语义化清晰

缺点：IE部分不兼容

before、after双伪元素

<div class="fahter clearfix">
  <div class="big">big</div>
  <div class="small">small</div>
</div>
<div class="footer"></div>

‍

.clearfix:after,.clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

‍优点：代码简洁

5）什么叫优雅降级和渐进增强

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

6）px、em、rem的区别

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。